时间戳

首页 > 解决方案 > 限制 AngularJS ng 风格

angularjs - 限制 AngularJS ng 风格

问题描述

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

我尝试使用 acustom directive但绑定DOM或编写 awatcher对我来说不是一个更可取的解决方案，因为性能原因。提前致谢！

标签： angularjsperformancedomangularjs-directiveangularjs-ng-style

解决方案

使用一次绑定，它只会调用styleElement一次。

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

推荐阅读