加载HTML后调用函数AngularJS答案

【问题标题】：Call function after HTML is loaded AngularJS加载HTML后调用函数AngularJS
【发布时间】：2016-08-02 08:53:54
【问题描述】：

伙计们，我有以下指令：

angular.module('blah').directive('someDirective', function () {
   return {
        scope: {
            arrayParam1: '=arrayParam1',
            arrayParam2: '=arrayParam2'
        },
        restrict: 'E',
        templateUrl: '/my/path/to/someDirective.tpl.html',
        link: function (scope, elem, attrs) { 
            //Some logic
            scope.someEvent = function(){
              //some logic
            }
            scope.$on('$viewContentLoaded', function () {
                debugger;
                scope.someEvent();
            });
        }
   };
});

现在在 HTML 中，我对其中一个数组进行了 ng-repeat（例如，arrayParam1），并且我正在显示一些内容。现在，您可以假设我的目标是在 HTML 完全加载后触发 scope.someEvent（完成 ng-repeat 的迭代）。

好吧，当我使用 $on 时，它甚至不会在调试器上停止。如果我将其更改为 $watch ，它会在 JS 中的所有代码完成后停止，但 HTML 仍未呈现，它会在视图完成之前触发我想要的事件。

提前致谢。

【问题讨论】：

你可以使用 timeout 代替 viewContentLoaded
这听起来像是一个 XY 问题。你想达到什么目的？
@TheMechanic 嗯，是的，我知道超时，但我希望它尽可能清楚地做到这一点。 @Iso 目标比我写的例子复杂得多。我正在使用 ng-repeat 创建手风琴，在 HTML 中完成后，我希望动态地将元素添加到每个窗格（来自 js）。
@lazarov 那你为什么不在ng-repeat 里面添加元素呢？
@lazarov 进行角度 dom 操作，最好使用数组而不是 dom 元素

标签： javascript html angularjs angularjs-directive

【解决方案1】：

使用 $timeout。

$timeout(function () {
   scope.someEvent();         
});

这会有所帮助。

或者，如果您不想使用 $timeout，您需要做的就是将该指令作为另一个指令的父级，并在父级链接阶段执行或触发该函数

【讨论】：

使用timeout是不好的做法。
是的，这很糟糕。但是接下来他要做的就是将另一个指令作为该指令的父级，并在父级链接阶段执行或触发该功能。