css - 如何使 Angular Directive(指令)不断检查元素的高度？

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

另请参阅:How JavaScript Timers Work