css - 如何使角度指令不断检查元素的高度？

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 会填充高度超过 250 像素的元素，但不会检查该指令，因此永远不会应用新样式。

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');
                }
            });
        }
    }
});

另请参阅：JavaScript 计时器的工作原理