1

我有一个相当简单的指令，我试图从中查询一个单独的（但相关的）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-500 毫秒的延迟将查询包装在 a 中来解决竞争条件，但这感觉不对。

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

这个 SO 线程概述了一个类似的问题，但零延迟超时对我不起作用。

4

2 回答 2

2

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

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

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

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

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

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

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

}

祝你好运

于 2013-07-30T13:56:30.987 回答
0

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

于 2013-07-30T12:56:26.880 回答