angular 指令链接函数在 DOM 操作中的奇怪优先级（在 ng-repeat 之后）

Question

我对这个 angular 事物（和一般的 web-dev）是新手，但是我遇到了一个关于自定义指令的 angular link 函数如何运行的奇怪行为更改 DOM。更具体地说，该指令（使用 ng-repeat）创建了一个模板的多个实例：这些实例可以通过 document.getElementsByClassName() 以某种方式访问，但不能在 angular 或 jquery 中访问。

我的index.html和组-widgets.html（包含模板）同样是：

<div class="groups_panel">
    <group-widgets class="col-md-12" style="margin-top:60px;"></group-widgets>
</div>

<div class="col-md-6 comment" ng-repeat="group in gWidget.groups">
    <div ...</div>
</div>

我的 app.js 就像：

(function(){
    var app = angular.module('pm',[]);
    app.directive('groupWidgets',function(){
        return{
            restrict: 'E',
            templateUrl: 'group-widgets.html',
            controller:function($scope){
                this.groups = allGroups;
                console.log($scope);
                console.log("Wait till renders...");                
            },
            controllerAs: 'gWidget',
            link: function(scope, element, attributes, parentCtrl){
                console.log("LINKED!");
                console.log(document.getElementsByClassName("comment"));
                console.log(element.html());
                console.log($(".comment"));
                console.log("END");
            }
        };
    });
})();

allGroups 变量是一个数组，其元素 ng-repeat 实例化。运行使用 chrome 开发工具后，我得到： Screenshot（检查内部 LINKED！和 END）。

很明显，在 linking 函数期间，由 ng-repeat 创建的 DOM（屏幕截图中显示的四个实例）可用于 getElementsByClassName() 但在 [=34 中不可用=] 元素对象既不在整个 DOM using jQuery!

我已经解决了其他问题 (Calling a function when ng-repeat has finished.,AngularJS: Linking to elements in a directive that uses ng-repeat) 中描述的问题，但我无法理解指令 link 函数工作的顺序以及为什么会发生这种情况。显然我做错了什么。你能帮我澄清一下这个问题吗？

提前致谢。

Answer 1

这里发生的事情可能会让您感到困惑，因为 Chrome 控制台在 "view-time" 评估记录的对象，而不是 "log-time"。

简单的检查方法是执行以下操作：

 console.log(document.getElementsByClassName("comment").length); // will be 0

因此，您从 document.getElementsByClassName 获得的 HTMLCollection 会在您查看日志时进行评估，因此包含 4 个 div。

(*) 我不确定 "viewing" 的具体构成，或者实际触发器是什么，但它不是日志记录。

angular 指令链接函数在 DOM 操作中的奇怪优先级（在 ng-repeat 之后）

Weird precedence of angular directive linking function in DOM manipulation (after ng-repeat)

jquery

dom

directive

angularjs

ng-repeat