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

Question

我正在尝试访问指令链接功能中的 DOM 元素。该元素位于 another 指令的视图中。代码如下：

第一个指令

    (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”，但它导致找不到指令的错误（我认为这可能是因为指令位于不同的目录中）

那么，你能告诉我 require 不起作用的原因，并建议我比 timeout 更好的解决方案

Answer 1

我认为，您的内容指令在您的第二个指令之前加载， 在您的内容指令中添加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 2

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

已经有类似问题的答案了。

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

Answer 3

除了这似乎不是一个好主意而且会被认为是“不好的做法”这一事实之外 - 您必须更改指令的优先级才能让它们按顺序编译您需要它们进行编译，以确保当第二个指令尝试访问元素时第一个指令已准备就绪。