我在 DOM 中有一个 Angular 模板。当我的控制器从服务中获取新数据时，它会更新 $scope 中的模型，并重新呈现模板。到目前为止一切都很好。
问题是，在重新渲染模板并在 DOM 中（在本例中为 jQuery 插件）后，我还需要做一些额外的工作。
好像应该有一个事件要听，比如AfterRender，但是我找不到任何这样的东西。也许指令会是一种方式，但它似乎也为时过早。
这是一个 jsFiddle 概述了我的问题：Fiddle-AngularIssue
== 更新 ==
根据有用的评论，我相应地切换到一个指令来处理 DOM 操作，并在该指令中实现了一个模型 $watch。但是，我仍然遇到相同的基本问题；$watch 事件中的代码在模板被编译并插入到 DOM 之前触发，因此，jquery 插件总是评估一个空表。
有趣的是，如果我删除 async 调用，整个事情都可以正常工作，所以这是朝着正确方向迈出的一步。
这是我更新的 Fiddle 以反映这些变化：http : //jsfiddle.net/uNREn/12/
首先，处理渲染的正确位置是指令。我的建议是通过像这样的指令来包装 DOM 操作 jQuery 插件。
我遇到了同样的问题并想出了这个片段。它使用$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);
});
});
},
};
});
希望这可以帮助您避免一些斗争。
这篇文章很旧，但我将您的代码更改为：
scope.$watch("assignments", function (value) {//I change here
var val = value || null;
if (val)
element.dataTable({"bDestroy": true});
});
}
见jsfiddle。
我希望它能帮助你
按照 Misko 的建议，如果你想要异步操作，那么代替 $timeout() （这不起作用）
$timeout(function () { $scope.assignmentsLoaded(data); }, 1000);
使用 $evalAsync() （确实有效）
$scope.$evalAsync(function() { $scope.assignmentsLoaded(data); } );
小提琴。我还添加了一个“删除数据行”链接，该链接将修改 $scope.assignments，模拟对数据/模型的更改——以表明更改数据有效。
概念概述页面的运行时部分解释了当您需要在当前堆栈帧之外但在浏览器呈现之前发生某些事情时，应使用 evalAsync。（在这里猜测……“当前堆栈帧”可能包括 Angular DOM 更新。）如果您需要在浏览器呈现后发生某些事情，请使用 $timeout。
但是，正如您已经发现的那样，我认为这里不需要异步操作。
我发现最简单（便宜又好用）的解决方案就是在渲染的最后一个元素的末尾添加一个带有 ng-show = "someFunctionThatAlwaysReturnsZeroOrNothing()" 的空跨度。此函数将在检查是否应显示 span 元素时运行。执行此函数中的任何其他代码。
我意识到这不是最优雅的做事方式，但是，它对我有用......
我有一个类似的情况，虽然稍微相反，我需要在动画开始时删除加载指示器，在移动设备上 angular 的初始化速度比要显示的动画快得多，并且使用 ng-cloak 是不够的，因为加载指示器是在显示任何真实数据之前就删除了。在这种情况下，我只是将 return 0 函数添加到第一个呈现的元素，并在该函数中翻转了隐藏加载指示器的 var。（当然，我在这个函数触发的加载指示器中添加了一个 ng-hide。
我认为您正在寻找 $evalAsync http://docs.angularjs.org/api/ng.$rootScope.Scope#$evalAsync