指令内部的DOM查询

DOM queries inside of a Directive

本文关键字：查询 DOM 内部 指令      更新时间：2023-09-26

我有一个相当简单的指令，试图从中查询一个单独的（但相关的）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>可用之前运行。到目前为止，我只能通过将查询封装在延迟100-500ms的$timeout中来解决比赛条件，但这感觉是错误的。

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

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

因此，正如我在评论中所说，一种简单的方法是使用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，我使用了香草JS，但它也可以与jQuery的toggle（）函数一起使用，例如

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

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

祝好运

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

相关文章：