ng-重复指令，只有最后一个元素响应调整大小事件

Question

我有一个非常简单的指令，它应该改变其宽度以响应$window.onresize事件。出于某种原因，只有ng-repeat数组中的最后一个元素/指令响应并相应地更改其 css。

<!-- html -->
<tile class="tile" ng-repeat="tile in tiles"></tile>

 

// js
function main ($scope) {
  $scope.tiles = []
  for (let i = 0; i < 6; i++) {
    $scope.tiles.push({ active: false })
  }
}
function tile ($window) {
  return {
    link: (scope, el, attr) => {
      let $main = document.querySelector('.right')      
      el.css({
        display: `inline-block`,
        padding: `1rem`,
        border: `1px solid #ccc`,
        width: `${$main.clientWidth / 3}px`
      })
      $window.onresize = () => {
        console.log($main.clientWidth)
        scope.$apply(() => {
          el.css({
            width: `${$main.clientWidth / 3}px`
          })
        })
      }
    }
  }
}
angular
  .module('app', [])
  .controller('main', main)
  .directive('tile', tile)

代码笔

Answer 1

问题是您将处理程序分配给$window.onresize，从而覆盖所有以前的处理程序。

请尝试执行以下操作：

// instead of $window.onresize = ...
angular.element($window).bind('resize', () => ...)

这样，您就可以绑定到 resize 事件，而不是为其分配单个处理程序。