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

一尘不染

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

javascript

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

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

似乎应该有一个事件要听，例如AfterRender，但我找不到任何此类事件。也许一条指令可以走，但它似乎还为时过早。

==更新==

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

有趣的是，如果我删除了异步调用，那么整个程序就可以正常工作，因此这是朝正确方向迈出的一步。

阅读 257

2020-05-01

一尘不染

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

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

希望对您有帮助

2020-05-01

一尘不染

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

2020-05-11

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

共2个答案