Angular指令只適用於ng-repeat的最後一個元素

在我的Angular項目中，我嘗試創建一個directive，它將在瀏覽器窗口調整大小時動態調整元素的寬度。爲了測試它，我創建了下面的代碼：Angular指令只適用於ng-repeat的最後一個元素

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

雖然確實正在對窗口大小調整應用，它只能被應用於ng-repeat的最後一個元素，這是下面一個500px寬度的元素風格：

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

它看起來好像指令的每次連續迭代覆蓋前一個。

我怎樣才能確保所有的元素都將被調整大小，而不僅僅是最後一個？

來源

2017-02-12 Tiago

這會，如果你使用的是引導被照顧！爲什麼一個單獨的指令呢？ – Aravind

如果您指的是引導程序的網格系統，那不是我打算使用的。這更多的是我的屬性指令的實驗。 – Tiago

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

來源

2017-02-12 09:45:52

我是否需要在指令中注入'$ window'？ – Tiago

@Tiago。沒有必要，因爲窗口是JavaScript全局變量，你可以在任何地方使用它，只需用$就像上面的答案一樣包裝它，除非你想以角度方式做。只需注入$窗口。 – digit

@Tiago謝謝你的提示，我正在編輯答案，對它有更多的見解，在性能上的觀點...事件的註銷是另一個方面可以阻止內存泄漏.. –

Angular指令只適用於ng-repeat的最後一個元素

回答

相關問題