如何使不断角度指令检查元素的高度？ [英] How to make an angular directive check constantly for an element's height?

问题描述

我用这个指令：

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

使用这个元素：＆LT; UL类=列表组ID =事件清单最大高度边界=250＆GT;

问题是：当我加载页面，这个元素是空的，指令的如果语句失败。加载后，角填补了这个元素的高度必须高于250像素，但随后的指令将不会被检查，所以永远不会应用新样式。

Problem is: when I load the page, this element is empty and the directive's if statement fails. After loading, Angular fills this element its height goes above 250px, but then the directive won't be checked for, so the new style is never applied.

推荐答案

试试这个：

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的定时器工作

这篇关于如何使不断角度指令检查元素的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！