javascript - AngularJS：AngularJS渲染模板后如何运行其他代码？(AngularJS: How to run additional code after AngularJS has rendered a template?)

Question

I have an Angular template in the DOM.

(我在DOM中有一个Angular模板。)

When my controller gets new data from a service, it updates the model in the $scope, and re-renders the template.

(当我的控制器从服务获取新数据时，它会更新$ scope中的模型，然后重新呈现模板。)

All good so far.

(到目前为止都很好。)

The issue is that I need to also do some extra work after the template has been re-rendered and is in the DOM (in this case a jQuery plugin).

(问题是我需要在模板重新渲染之后做一些额外的工作并且在DOM中（在这种情况下是一个jQuery插件）。)

It seems like there should be an event to listen to, such as AfterRender, but I can't find any such thing.

(似乎应该有一个事件要听，比如AfterRender，但我找不到任何这样的事情。)

Maybe a directive would be a way to go, but it seemed to fire too early as well.

(也许一个指令是一种可行的方式，但它似乎也太早了。)

Here is a jsFiddle outlining my problem: Fiddle-AngularIssue

(这是一个概述我的问题的jsFiddle ： Fiddle-AngularIssue)

== UPDATE ==

(==更新==)

Based on helpful comments, I've accordingly switched to a directive to handle DOM manipulation, and implemented a model $watch inside the directive.

(根据有用的评论，我相应地切换到一个指令来处理DOM操作，并在指令中实现了一个模型$ watch。)

However, I still am having the same base issue;

(但是，我仍然有同样的基础问题;)

the code inside of the $watch event fires before the template has been compiled and inserted into the DOM, therefore, the jquery plugin is always evaluating an empty table.

($ watch事件内部的代码在模板编译并插入DOM之前触发，因此，jquery插件总是在评估一个空表。)

Interestingly, if I remove the async call the whole thing works fine, so that's a step in the right direction.

(有趣的是，如果我删除异步调用，整个过程就可以了，所以这是朝着正确方向迈出的一步。)

Here is my updated Fiddle to reflect these changes: http://jsfiddle.net/uNREn/12/

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

  ask by gorebash translate from so

Answer 1

First, the right place to mess with rendering are directives.

(首先，混淆渲染的正确位置是指令。)

My advice would be to wrap DOM manipulating jQuery plugins by directives like this one.

(我的建议是用像这样的指令来包装DOM操作jQuery插件。)

I had the same problem and came up with this snippet.

(我有同样的问题，想出了这个片段。)

It uses $watch and $evalAsync to ensure your code runs after directives like ng-repeat have been resolved and templates like {{ value }} got rendered.

(它使用$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);
                });
            });
        },
    };
});

Hope this can help you prevent some struggle.

(希望这可以帮助你防止一些斗争。)