小编典典

AngularJS:AngularJS渲染模板后如何运行其他代码?

javascript

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

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

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

==更新==

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

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


阅读 276

收藏
2020-05-01

共2个答案

小编典典

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

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