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

Question

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

我在$(document).ready中初始化dataTables并使用Angular $ routeProvider来浏览我的视图.更改视图然后再返回到表时,dataTable未运行.

该表填充了来自多个ng-repeat指令的对象.下面没有包含此代码,因为它是一个非常庞大的表.

哪个是在Angular应用程序中初始化dataTables的首选方法,以通过指令,控制器或$(document).ready(function())来摆脱竞争条件,就像我现在一样？

我试过这个指令,但从来没有让它起作用:http: //jsfiddle.net/TNy3w/2/ 我应该继续这条路吗？

dataTable init:

$(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 id="t">
<..... TABLE CODE .....>
</table>

Answer 1

我建议你看看这个。我最近刚刚开发了这段代码。它是原生的角度且易于理解。它充满活力，是一张很酷的桌子。

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

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

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

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

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

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

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

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

这在你的角度应用程序中..

$scope.angularFunction = function () {

    JQueryfunction();

}

这不是有角的..

JQueryfubction () {

    // your jQuery function logic

}