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

Question

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

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

主网页

<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>

侧边导航网页

<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，但真的不知道什么是"安全价值"。

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

Answer 1

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

我将指令定义修改为

function tipSidenav() {
    return {
        templateUrl: '/tip/resources/html/sidenav.html',
        controller: ['$rootScope', function($rootScope) {
            var ctrl = this;
            $rootScope.$watchCollection(
                function(scope) {
                    return getSections();
                },
                function(newValue, oldValue, scope) {
                    ctrl.sections = newValue;
                }
            );
            ctrl.scrollTo = /*...*/;
            function getSections() {
                // More efficient way of gettings IDs
                var ids = [];
                var nodeList = document.querySelectorAll('.sidenav-item');
                for (var i = 0; i < nodeList.length; i++) {
                    ids.push(nodeList[i].id);
                }
                return ids;
            }
        }],
        controllerAs: 'ctrl'
    };
}

Answer 2

像这样使用链接函数：

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