title: find position of element - angularjs
body: <p>I try to find the position of an arbitrary element inside an angular directive.</p>
  
  <p>My idea was to add a class with ng-class and then use <code>element[0].querySelector('.theClass').getBoundingClientRect();</code> to get the position.</p>
  
  <p>The error is: <code>Cannot read property 'getBoundingClientRect' of null</code>.</p>
  
  <p>So my suspect is, that the template of the directive is not compiled yet, such that querySelector can not find it.</p>
  
  <p>So I also tried <code>$timeout(function(){ ... })</code>, but with the same result.</p>
  
  <p>Any ideas how to find the position of an arbitrary element in angular?</p>
  
  <p>The code:</p>
  
  <pre><code>'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);
          });
        }
      };
    });
  </code></pre>
  
  <p>And the template is about:</p>
  
  <pre><code>&lt;span ng-repeat="object in objects"&gt;
     &lt;span ng-class="{'theClass':$last}"&gt;&lt;/span&gt;
  &lt;/span&gt;
  </code></pre>