在ng-if编译后访问指令中的DOM元素

Question

我正在尝试构建一个侧面导航菜单，但希望动态根据DOM的状态（即我的DOM中的<section>）填充其项目。

但是，我有一些ng-if应用于基于范围变量的各种<section>，这些变量是通过AJAX （$http.get）检索的。因此，当编译（或链接）指令时，尚未检索到这些范围变量，并且ng-if尚未稳定（它们被评估为变量为undefined）。

主要HTML

<my-sidenav></my-sidenav>

<!-- Bunch of other content and structure -->

<section id="foo1" class="sidenav-item">...</section>
<section id="foo2" class="sidenav-item">...</section>
<section id="foo3" class="sidenav-item" ng-if="fooVar1 === fooVar2">...</section>
<section id="foo4" class="sidenav-item">...</section>
<section id="foo5" class="sidenav-item" ng-if="fooVar3 !== fooVar4">...</section>

Sidenav HTML

<div>
    <a ng-repeat="section in ctrl.sections track by section" href="#" ng-click="ctrl.scrollTo(section)">{{section}}</a>
</div>

指令定义

function mySidenav() {
    return {
        templateUrl: 'sidenav.html',
        controller: function() {
            var ctrl = this;

            // After template URL is linked up
            // !!! ng-if still not stable !!!
            ctrl.$postLink = function() {
                // Convert nodeList to array for easier manipulation
                var nodeList = document.querySelectorAll('.sidenav-item');
                var nodeArray = Array.prototype.slice.call(nodeList);

                // Extract section id
                ctrl.sections = nodeArray.map(function(el) {return el.id;});
            };

            ctrl.scrollTo = /*...*/
        },
        controllerAs: 'ctrl'
    };
}

ng-if表达式稳定后，页面上访问DOM元素的最佳方法是什么？我在想$timeout，但不会真正知道什么是安全价值＆＃34;会的。

或者我可以/应该以某种方式使用$watch吗？有没有办法让ctrl.sections动态更新？

Answer 1

像这样使用链接功能：

function mySidenav() {
    return {
        templateUrl: 'sidenav.html',
        link: function(scope, elm) {
                // Convert nodeList to array for easier manipulation
                var nodeList = document.querySelectorAll('.sidenav-item');
                var nodeArray = Array.prototype.slice.call(nodeList);
                var sections = nodeArray.map(function(el) {return el.id;});   
        }
    };
}

http://codepen.io/nicholasabrams/pen/oxVxQa?editors=1010

Answer 2

所以id有效，但我会保持这个问题的开放，以获得有关此解决方案或其他解决方案的反馈。

我将指令定义修改为

$watchCollection