javascript - Angular 指令仅适用于 ng-repeat 的最后一个元素

Question

在我的 Angular 项目中，我尝试创建一个 指令，当浏览器窗口调整大小时，它会动态调整元素的宽度。为了测试它，我创建了以下代码:

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

Note: This could be a bad in terms of performance, as if there are more than 1k records can put 1k resize event register on.

同样，一旦行被删除，您应该考虑取消绑定(bind)事件。这可以避免内存泄漏问题。还使用 $window 而不是 window(确保在指令函数中注入(inject) $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)
})