Блог

Я вычисляю высоту контейнеров в соответствии с окном просмотра с 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'
        };
    }
};
 

Я пробовал использовать a custom directive , но привязка DOM или написание a watcher не являются предпочтительным решением для меня из-за производительности. Заранее спасибо!

Используйте однократную привязку, которая будет вызываться только styleElement один раз.

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