限制 AngularJS ng 风格

Posted 2023-02-21

【中文标题】限制 AngularJS ng 风格

【英文标题】：Restrict AngularJS ng-style

【发布时间】：2021-08-19 05:29:26

【问题描述】：

我正在通过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 对我来说不是一个更可取的解决方案。提前致谢！

【参考方案1】：

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

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

【讨论】：

尝试并得到错误：Error: [$parse:syntax] Syntax Error: Token ':' not a primary expression at column 1 of the expression [::styleElement('myElement')] starting at [::styleElement('myElement')].

您使用的是哪个 angularjs 版本？这应该从 v1.3.0 开始工作