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

如何针对元素的高度不断检查角度指令？

1 个答案: