AngularJS：如何在AngularJS渲染模板之后运行其他代码？

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

问题是我需要在模板被重新渲染并且在DOM中（在这个例子中是一个jQuery插件）之后做一些额外的工作。

似乎应该有一个事件要听，比如AfterRender，但是我找不到任何这样的事情。 也许一个指令是一条可行的路线，但它似乎也太早了。

这是一个jsFiddle概述我的问题：小提琴AngularIssue

==更新==

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

有趣的是，如果我删除异步调用，整个事情都可以正常工作，所以这是朝正确方向迈出的一步。

这是我更新的小提琴以反映这些变化：http://jsfiddle.net/uNREn/12/

---

这篇文章是旧的，但我更改您的代码：

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

请参阅：http://jsfiddle.net/dnzY9/

我希望它能帮助你

---

首先，渲染的正确位置是指令。 我的建议是通过像这样的指令来包装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);
                });
            });
        },
    };
});

希望这可以帮助你防止一些困难。

---

遵循Misko的建议，如果你想要异步操作，那么不要使用$ timeout（）（这不起作用）

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

使用$ evalAsync（）（它工作）

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

小提琴。 我还添加了一个“删除数据行”链接，该链接将修改$ scope.assignments，模拟对数据/模型的更改 - 以显示更改数据的作用。

概念性概览页面的运行时部分解释了当您需要在当前堆栈框架之外但在浏览器呈现之前发生的情况时，应使用evalAsync。 （这里猜测......“当前堆栈框架”可能包含Angular DOM更新。）如果在浏览器呈现后需要某些内容，请使用$ timeout。

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

链接地址: http://www.djcxy.com/p/60807.html

上一篇: AngularJS: How to run additional code after AngularJS has rendered a template?

下一篇: Using Ember.js, how do I run some JS after a view is rendered?