查找元素的位置 - angularjs

Question

我試圖找到角度指令內任意元素的位置。

我的想法是用ng-class添加一個類，然後使用element[0].querySelector('.theClass').getBoundingClientRect();來獲得位置。

錯誤是：Cannot read property 'getBoundingClientRect' of null。

所以我懷疑是，該指令的模板還沒有編譯，使querySelector無法找到它。

所以我也試過$timeout(function(){ ... })，但結果相同。

任何想法如何在角度中找到任意元素的位置？

代碼：

'use strict'; 

angular.module('myApp') 
    .directive('myDirective', function ($timeout) { 
    return { 
     templateUrl: 'the/template', 
     restrict: 'EA', 
     scope: { 
     objects:"=" 
     }, 
     link: function (scope, element, attrs) { 
     $timeout(function(){ 
      //DOM has finished rendering 
      var rect = element[0].querySelector('.theClass').getBoundingClientRect(); 
      console.log('this is the element'); 
      console.log(rect.top, rect.right, rect.bottom, rect.left); 
     }); 
     } 
    }; 
    }); 

而且模板大概是：

<span ng-repeat="object in objects"> 
    <span ng-class="{'theClass':$last}"></span> 
</span> 

Answer 1

也許你應該儘量把它放在postLink像：

angular.module('myApp') 
    .directive('myDirective', function() { 
    return { 
     templateUrl: 'the/template', 
     restrict: 'EA', 
     scope: { 
     objects:"=" 
     }, 
     link: { 
      post : function (scope, element, attrs) { 

       var rect = element[0].querySelector('.theClass').getBoundingClientRect(); 
       console.log('this is the element'); 
       console.log(rect.top, rect.right, rect.bottom, rect.left); 
      } 
     } 
    }; 
    });