ng-repeat of directives,只有last元素响应resize事件

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)

codepen

Answer 1

问题是你要分配你的处理程序$window.onresize,从而覆盖所有以前的处理程序.

请尝试执行以下操作:

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

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