Question

我尝试在angular指令中找到任意元素的位置。

我的想法是添加一个带有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);
            }
       }
     };
  });

找到元素的位置 - angularjs

1 个答案: