javascript - 指令内的 DOM 查询

Question

我有一个相当简单的指令，我试图从中查询一个单独的(但相关的)DOM 元素。

相关标记:

<a href="#target-id" data-collapsible="isCollapsed">Open</a>
...
<div id="target-id">...</div>

Controller :

app.controller('MyController', ['$scope', function( $scope ) {
    $scope.isCollapsed = true;
}]);

指令:

app.directive('collapsible', function() {
    return {
        restrict: 'A',
        link: function( scope, el, attrs ) {
            var target = attrs.href.slice(1); // "target-id"
            console.log(document.getElementById(target)); // this will be null
        }
    };
});

问题是 DOM 查询 ( document.getElementById(target) ) 在 <div id="target-id">...</div> 之前运行可用。到目前为止，我只能通过将查询包装在 $timeout 中来解决竞争条件。有 100-500 毫秒的延迟，但这感觉不对。

肯定是我做错了什么和/或必须有更好的方法来解决这个问题？

This SO thread概述了类似的问题，但零延迟超时对我不起作用。

Answer 1

所以，正如我在评论中所说，一个简单的方法是使用 ng-click/ng-show 来切换显示

<a href="#target-id" ng-click='visibleTargetId=!visibleTargetId'>Open</a>
<div id="target-id" ng-show='visibleTargetId'>

当然可以用一个函数来实现，但是这需要手动设置一个变量，这不是真正可扩展的

如果您想完全摆脱变量并继续使用指令，您还可以在该指令中绑定(bind)一个点击事件。你可以在这里看到 fiddle :http://jsfiddle.net/DotDotDot/vGCJF/3/

如果你想避免加载 jQuery，我使用了 vanilla JS，但它也可以与 jQuery 的 toggle() 函数一起使用，例如

代码非常简单，在你的指令中的链接函数中:

 el.bind('click', function(e){
 //whatever you want to do

}

祝你好运