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事件，而不是为它分配一个处理程序。

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

1 个答案: