限制Angular 样式

uajslkp6  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(246)

我正在按视口计算容器高度 ng-style 通过我的自定义方法。
一切工作正常,但即使元素已设置样式,它仍会继续调用该方法。我有大量需要设置样式的dom元素。这就是为什么,我不能允许所有元素都连续执行。请注意,我不能使用 ng-class 因为每个元素包含不同的内容。由于元素数量不限,无法使用控制器范围变量。
html:

<div class="myElement" ng-style="styleElement('myElement')">
    ...
    ...
</div>

功能:

$scope.styleElement =  function (elementCls) {
    var elementToSet = $('.'+elementCls+':visible');
    if(elementToSet.length){
        var winHeight = $( window ).height();
        var eTop = elementToSet.offset().top;
        if(eTop == 0){
            var elemChilds = elementToSet;
            var elemChildsLen = elemChilds.length;
            for(var i=0;i<elemChildsLen;i++){
                var elem = elemChilds[i];
                var r = elem.getBoundingClientRect();
                if(r.top != 0){
                    eTop = r.top;
                    i= elemChildsLen; 
                }
            }
        }
        var nScrollHeight = winHeight - eTop - 20;
        return { 
            'height': nScrollHeight + 'px',
            'overflow-x': 'hidden',
            'overflow-y': 'auto'
        };
    }
};

我试着用一个 custom directive 但有约束力 DOM 或者写一封信 watcher 由于性能原因,对我来说不是更好的解决方案。提前谢谢!

jdzmm42g

jdzmm42g1#

使用一次绑定,它将只调用 styleElement 一旦

<div class="myElement" ng-style="::styleElement('myElement')">
    ...
    ...
</div>

相关问题