Question

我正在尝试访问Directive链接函数中的DOM元素。该元素位于另一个指令的视图中。这是代码：

第一个指令

    (function () {
        'use strict';
        angular.module("testAPP",[])


        .directive('firstDirective', function(){
            var directive = {
                 restrict: 'E',
                 templateUrl: 'firstDirective.html'
                }
                return directive;
        })
  })();

第二指令

(function () {
      'use strict';
       angular.module("testAPP",[])
        .directive('anotherDirective', function(){
             var directive = {
                restrict: 'E',
                templateUrl: 'anotherDirective.html',
                link: function($scope){
                  //element from another directive's view

                  var height = document.getElementByClassName("sky")[0].offsetHeight;
                }
             };
             return directive;

           });
     })();

有一个控制台错误，指出 height 变量未定义。我尝试了超时功能，这对我有用，但我认为这不是一个好的解决方案：

setTimeout(function(){
  var height = document.getElementByClassName("sky")[0].offsetHeight;
  console.log(height);
});

我也试过“ require ”，但是它导致了一个错误，指令无法找到（我想这可能是因为指令位于不同的目录中）

那么，你能否告诉我为什么要求不起作用的原因，并建议我比超时更好的解决方案

Answer 1

除了事实上这首先看起来不是一个好主意并被视为“不良做法” - 你必须改变你的指令的优先级，以便让他们按顺序编译你需要它们进行编译，以确保第二个指令在第二个指令尝试访问元素时就绪。

Answer 2

我认为，你的内容指令在第二个指令之前加载，在您的内容指令上添加ng-if可能会解决问题

    angular.module("testAPP",[])
                .directive('secondDirective', function(){
       var directive = {
       restrict: 'E',
       templateUrl: 'secondDirective.html',
       link: function($scope){
           $scope.scondDirctiveLoaded = true;
       }
     };
     return directive;
    });

<second-directive></second-directive>
<div ng-if="scondDirctiveLoaded">
    <content-directive  ng-if="scondDirctiveLoaded" ></content-directive>
</div>

Answer 3

在DOM实际准备好之前实例化指令时会发生此错误。 $ timeout工作，因为它延迟了元素的抓取，直到Angulars下一个滴答周期 - 虽然这感觉像一个反模式似乎是一个可接受的问题的解决方案。

对于与此类似的问题已经有了答案。

How can I run a directive after the dom has finished rendering?

如何从另一个指令访问指令的DOM元素？

3 个答案: