AngularJS - 递归ng-include - 如何知道整个树的渲染时间

Question

我正在尝试使用ng-include递归渲染层次树.这是一个小提琴

问题是我的链接函数在渲染完成之前被调用,以尝试初始化空列表上的菜单插件.

link: function (scope, element, attrs) {

    var $menus = element.find("ul");

    //Prints empty element        
    console.log($menus.html());

    //No real $menus to initialize 
    //$menus.menuAim({ });

}

我知道有onloadng-include,但是我不想诉诸于一些丑陋的黑客,比如在每个onload上增加一个计数器并与元素的数量进行比较,因为计算计数由于层次结构而变得棘手.

什么是更清楚的方式来了解ng-include何时完成完整的递归渲染并且所有元素都在页面上？

我尝试使用postLink而不是link但指令仍然打印一个空<ul>:

link: {
     pre: angular.noop,
     post: function(scope, element, attrs){
          //no difference
     }
}

Answer 1

您可以使用 $timeout 来达到上述目的。如果没有提供第二个参数“delay”，则默认行为是在dom渲染完成后执行该函数。所以代码会是这样的：

    $timeout(function () {
        //Prints empty element        
        console.log($menu.html());
    });

并且 $timeout 需要作为指令中的依赖项注入，如下所示

    .directive('menuHierarchy', function ($timeout) {
        //directive code
    });

在您的示例中，它会根据您的需要正确打印所有“li”节点。