在AngularJs中的位置

Question

我正在使用eyeTracker，並且想要更改UI，依賴於Eyetrackerpositon。

我想在我的網站中定義區域。如果eyeTrackerPosition在該區域內（站立），那麼我想改變該區域的顏色。

在這種情況下，區域是指令。

但是它如何與位置一起工作？因爲我需要比屏幕座標。

你有什麼想法可能嗎？

如何查詢位置是否包含區域？有數組？

Answer 1

確定HTML元素的位置/大小的一個好的起點是使用getBoundingClientRect。它返回一個包含任何DOM元素的left，top，width和height的對象。更多的在這裏：https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Answer 2

嗨我使用你建議的方法。

myApp.directive('hasFocus', function ($interval) { 
return { 
    restrict: 'A', 
    scope: { 
    }, 
    templateUrl: '123/Scripts/directives/route.html', 
    link: function (scope, element, attrs) { 
     $interval(function() { 
      var rect = element[0].getBoundingClientRect(); 

      x = rect.left; 
      y = rect.top; 
      w = rect.right - rect.left; 
      h = rect.bottom - rect.top; 

      // element.text(x + ", " + y + ", " + w + ", " + h); 

     }, 3000); 
    } 
    }; 
}); 

它正在工作。

但現在我在我的面板在鏈接的位置。我在route.html中定義的面板。

route.html：

<div class="panel panel-primary"> 

<div class="panel-heading">Panel heading</div>  <!-- i want this position--> 
<div class="panel-body"> 
    <!--table--> 
    <table class="table table-condensed"> 
     <thead> 
      <tr> 
       <th>#</th> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Username</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>1</td> 
       <td>Mark</td> 
       <td>Otto</td> 
       <td>@mdo</td> 
      </tr> 
     </tbody> 
    </table> 
</div>