Угловая директива применяется только к последнему элементу ng-repeat

Question

В моем проекте Angular я попытался создать directive, который будет динамически изменять размер элемента при изменении размера окна браузера. Чтобы проверить это, я создал код ниже:

(function() { 
    'use strict'; 

    angular 
     .module('ftagn') 
     .directive('dynamicWidth', dynamicWidthDirective); 

    dynamicWidthDirective.$inject = []; 

    function dynamicWidthDirective($window) { 
     var directive = { 
      link: link, 
      restrict: 'A' 
     }; 
     return directive; 

     function link(scope, element, attrs) { 
      console.log(window) 
      window.onresize = function(event) { 
       element[ 0 ].style.width = '500px'; 
      }; 
     } 
    } 
})(); 

В то время как элемент стиля 500px ширины действительно применяется на изменения размеров окна, это только применяется к последнему элементу ng-repeat, что следующий один :

<div class="card" dynamic-width ng-repeat="fruit in $ctrl.fruits" > 
    <div>{{fruit}}</div> 
</div> 

Похоже, что каждая последующая итерация директивы перезаписывает предыдущую.

Как я могу обеспечить, чтобы все элементы были изменены, а не только последний?

Answer 1

window.onresize событие будет регистрироваться только один раз, это только последняя строка resize событие получает регистрацию на window объект.

Скорее используйте $(window).resize, который может принимать коллекцию событий желаемого элемента.

$(window).resize(function(event) { 
    element[ 0 ].style.width = '500px'; 
}); 

Примечание: Это может быть плохо с точки зрения производительности, так как если есть больше, чем 1k записи можно положить 1k resize событие регистрации на.

Для этого вы должны рассмотреть возможность отменить событие после удаления строки. Это может привести к утечке памяти. Кроме того, использование $window вместо window (Убедитесь, что Вы вводите $window в функции директивного)

var w = angular.element($window); 
var resizer= function(event) { 
    element[0].style.width = '500px'; 
}; 
w.resize(resizer); 
scope.$on('$destroy', function(event){ 
    w.off('resize', resizer) 
})