Skip to main content
 首页 » 编程设计

jquery之使用 $routeProvider 时 Angular 应用程序中的 dataTables jQuery 插件

2026年05月17日38myhome

我想在我的 Angular 应用程序中使用 dataTables jQuery 插件,但面临着 Angular 路由的问题。

我在 $(document).ready 中初始化 dataTables 并使用 Angular $routeProvider 在我的 View 中导航。当更改 View 然后再次返回表时,dataTable 未运行。

该表填充了来自多个 ng-repeat 指令的对象。下面未包含此代码,因为它是一个相当大的表。

在 Angular 应用程序中通过指令、 Controller 或 $(document).ready(function()) 初始化数据表以消除竞争条件的首选方式是哪种?就像我现在所做的那样?

我尝试过这个指令但从未让它工作: http://jsfiddle.net/TNy3w/2/ 我应该继续走这条路吗?

数据表初始化:

$(document).ready(function() { 
oTable = $('#t').dataTable({ 
    "bSort": false, 
    "bFilter": true, 
    "bInfo": false, 
    "sScrollY": "500px", 
    "sScrollX": "10%", 
    //"sScrollXInner" : "150%", 
    "bScrollCollapse": true, 
    "bPaginate": false, 
}); 
new FixedColumns(oTable); 
}); 

我的 table :

</table id="t"> 
<..... TABLE CODE .....> 
</table> 

请您参考如下方法:

我建议你看看这个。我最近刚刚开发了这段代码。它是原生的 Angular 且易于理解。它充满活力,而且很酷。

http://plnkr.co/edit/pmCjQL39BWWowIAgj9hP?p=preview

就我个人而言,我认为您正在为自己正在使用的代码组合设置问题。您是否有可能完全放弃使用 jQuery?当我第一次开始使用 ng 时,我混合了很多 jQuery,这让我很头疼。

如果您想继续使用 jQuery...

我的猜测是你的 Angular 应用程序和 jQuery 没有说话。

路由提供者加载部分内容。为了从 jQuery 调用函数,您必须在 Angular Controller 的范围内调用它,或者必须将 jQuery 所做的更改应用于该范围。

如果您在路由提供程序中加载部分内容,则不会触发文档就绪事件。您可以将文档就绪代码存储到函数中,并在 Controller 中或从 Angular 函数中调用它。坦率地说,将它们结合起来简直就是噩梦。

我构建了一个结合kineticjs、jQuery 和 Angular 的项目,我必须从 Angular 函数中调用所有 jQuery 函数才能使其全部正常工作。

所以你需要一些类似的东西..

这在你的 Angular 应用程序中..

$scope.angularFunction = function () { 
 
    JQueryfunction(); 
 
} 

这不是有 Angular 的..

JQueryfubction () { 
 
    // your jQuery function logic 
 
}