如何使角度指令不斷檢查元素的高度？

Question

我使用這個指令：

App 
    .directive('maxHeightBorder', function(){ 
    return { 
     restrict: 'A', 
     link: function($scope, $el, $attr){ 
      if($el.height() >= $attr.maxHeightBorder){ 
       $el.css('box-shadow','0 0 5px 5px black'); 
      } 
     } 
    } 
}); 

與此元素：<ul class="list-group" id="events-list" max-height-border="250">

問題是：當我加載頁面，這個元素是空的，指令的if語句失敗。加載之後，Angular填充這個元素的高度超過250px，但是這個指令不會被檢查，所以新的樣式從不應用。

Answer 1

試試這個：

directive('maxHeightBorder', function($timeout){ // inject $timeout wrapper 
    return { 
     restrict: 'A', 
     link: function(scope, el, attr){ 
      $timeout(function(){ 
       if(el.height() >= attr.maxHeightBorder){ 
        el.css('border-bottom','2px solid'); 
       } 
      }); 
     } 
    } 
}); 

參見：How JavaScript Timers Work