javascript - AngularJS:AngularJS 渲染模板后如何运行附加代码？

Question

我在 DOM 中有一个 Angular 模板。当我的 Controller 从服务中获取新数据时，它会更新 $scope 中的模型，并重新渲染模板。到目前为止一切顺利。

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

似乎应该有一个事件可以听，例如 AfterRender，但我找不到任何这样的东西。也许一个指令会是一种方法，但它似乎也太早了。

这是一个概述我的问题的 jsFiddle:Fiddle-AngularIssue

== 更新 ==

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

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

这是我更新的 Fiddle 以反射(reflect)这些更改:http://jsfiddle.net/uNREn/12/

Answer 1

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

希望这可以帮助您避免一些麻烦。