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

javascript dom jquery angularjs

2022-08-30 01:45:07

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

问题是，在模板重新呈现并在DOM中（在本例中为jQuery插件）之后，我还需要做一些额外的工作。

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

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

== 更新 ==

根据有用的注释，我相应地切换到指令来处理DOM操作，并在指令中实现了模型$watch。但是，我仍然遇到相同的基本问题;在编译模板并将其插入 DOM 之前，$watch事件内部的代码将触发，因此，jquery 插件始终在计算空表。

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

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

答案 1

首先，搞砸渲染的正确位置是指令。我的建议是通过这样的指令包装DOM操作jQuery插件。

我遇到了同样的问题，并想出了这个片段。它使用和确保您的代码在指令（如已解析）和模板（如已呈现）之后运行。$watch$evalAsyncng-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);
                });
            });
        },
    };
});

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

答案 2

这篇文章很旧，但我把你的代码改成了：

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

参见 jsfiddle。

我希望它能帮助你