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)
})

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

1 个答案: