我在DOM中有一个Angular模板。当我的控制器从服务中获取新数据时,它将更新$ scope中的模型,然后重新呈现模板。到目前为止一切都很好。
问题是,在模板重新呈现并且在DOM中(在本例中为jQuery插件)之后,我还需要做一些额外的工作。
似乎应该有一个事件要听,例如AfterRender,但我找不到任何此类事件。也许一条指令可以走,但它似乎还为时过早。
==更新==
基于有用的评论,我相应地切换到了处理DOM操作的指令,并在指令内部实现了$ watch模型。但是,我仍然遇到相同的基本问题。$ watch事件内部的代码在模板被编译并插入DOM之前触发,因此,jQuery插件始终在评估一个空表。
有趣的是,如果我删除了异步调用,那么整个程序就可以正常工作,因此这是朝正确方向迈出的一步。
这篇文章很旧,但是我将您的代码更改为:
scope.$watch("assignments", function (value) {//I change here var val = value || null; if (val) element.dataTable({"bDestroy": true}); }); }
希望对您有帮助
首先,正确处理渲染的地方是指令。我的建议是通过像这样的指令来包装DOM操作jQuery插件。
我遇到了同样的问题,并提出了这个代码段。它使用$watch和$evalAsync来确保您的代码在ng-repeat已解决诸如指令之类的指令以及诸如模板之类的模板之后运行{{ value }}。
$watch
$evalAsync
ng-repeat
{{ value }}
app.directive('name', function() { return { link: function($scope, element, attrs) { // Trigger when number of children changes, // including by directives like ng-repeat var watch = $scope.$watch(function() { return element.children().length; }, function() { // Wait for templates to render $scope.$evalAsync(function() { // Finally, directives are evaluated // and templates are renderer here var children = element.children(); console.log(children); }); }); }, }; });