2

私はこのディレクティブを使用します:

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 を超えるこの要素を埋めますが、ディレクティブはチェックされないため、新しいスタイルは適用されません。

4

1 に答える 1

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 タイマーのしくみ

于 2013-10-24T10:31:52.810 に答える