如何從另一個指令訪問指令的DOM元素？

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;

           });
     })();

出現控制台錯誤，提示高度變量未定義。 我嘗試了超時功能，對我有用，但是我認為這不是一個好的解決方案：

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下一個刻度周期為止-雖然這感覺像是一種反模式，但似乎可以解決該問題。

與此類似的問題已經有了答案。

dom完成渲染后如何運行指令？