Question

我有一个相当简单的指令，我试图查询一个单独的（但相关的）DOM元素。

相关标记：

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

控制器：

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-500ms来解决竞争条件，但这感觉不对。

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

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

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

如果您想完全摆脱变量并继续使用指令，您还可以绑定该指令中的click事件。你可以在这里看到小提琴：http://jsfiddle.net/DotDotDot/vGCJF/3/

我使用vanilla JS，如果你想避免加载jQuery，但它也可以和jQuery的toggle（）函数一起使用，例如

代码很简单，在你的指令的链接函数中：

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

}

祝你好运

Answer 2

尝试将您的指令括起来$(function(){ ... });在加载DOM内容后触发此jQuery函数

DOM指令内部的查询

2 个答案: