AngularJS：AngularJS渲染模板后如何运行附加代码？

Question

我在DOM中有一个Angular模板。当我的控制器从服务获取新数据时，它会更新$scope中的模型，并重新呈现模板。到目前为止一切都很好。

问题是，在模板被重新渲染并放入DOM(在本例中是一个jQuery插件)后，我还需要做一些额外的工作。

似乎应该有一个事件可以听，比如后浪汉，但我找不到任何这样的东西。也许指令是一条出路，但它似乎也太早了。

这是一个js小提琴概述我的问题：小提琴 - 角度问题

==更新==

基于有用的评论，我相应地切换到一个指令来处理DOM操作，并在指令中实现了一个模型$watch。但是，我仍然有同样的基本问题；$watch事件中的代码在模板被编译并插入DOM之前触发，因此，jquery插件总是评估一个空表。

有趣的是，如果我删除异步调用，整个html" target="_blank">过程就可以正常工作，所以这是朝着正确方向迈出的一步。

以下是我更新的Fiddle，以反映这些变化：http://jsfiddle.net/uNREn/12/

Answer 1

按照Misko的建议，如果您想要异步操作，那么可以使用$timeout（）代替它（它不起作用）

$timeout(function () { $scope.assignmentsLoaded(data); }, 1000);

使用$evalAsync（）（这确实有效）

$scope.$evalAsync(function() { $scope.assignmentsLoaded(data); } );

不停摆弄我还添加了一个“删除数据行”链接，该链接将修改$scope。赋值，模拟数据/模型的更改，以显示更改数据的效果。

Conceptual Overview页面的Runtime部分解释了当需要在当前堆栈帧之外发生某些事情时，但在浏览器呈现之前，应该使用evalAsync。（此处猜测……“当前堆栈帧”可能包括Angular DOM更新。）如果在浏览器呈现后需要进行某些操作，请使用$timeout。

然而，正如您已经发现的那样，我认为这里不需要异步操作。

Answer 2

这篇文章是旧的，但是我把你的代码改成:

scope.$watch("assignments", function (value) {//I change here
  var val = value || null;            
  if (val)
    element.dataTable({"bDestroy": true});
  });
}

见jsfiddle。

希望对你有帮助

Answer 3

首先，混淆渲染的正确位置是指令。我的建议是用像这样的指令来包装DOM操作jQuery插件。

我也遇到了同样的问题，想出了这个片段。它使用$watch和$evalAsync来确保在解析 >等模板之后运行代码。

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);
                });
            });
        },
    };
});

希望这可以帮助你防止一些挣扎。