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

我有一个非常简单的指令，它应该根据

$window.onresize

事件更改其宽度。由于某种原因，只有

ng repeat

数组中的最后一个元素/指令响应并相应地更改其css

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

//js
主要功能（$scope）{
$scope.tiles=[]
for（设i=0；i<6；i++）{
$scope.tiles.push（{active:false}）
}
}
功能磁贴（$window）{
返回{
链接：（范围、el、属性）=>{
让$main=document.querySelector（“.right”）
el.css({
显示：`inline block`，
填充：`1rem`，
边框：`1px实心#ccc`，
宽度：`${$main.clientWidth/3}px`
})
$window.onresize=（）=>{
console.log（$main.clientWidth）
范围.$apply（（）=>{
el.css({
宽度：`${$main.clientWidth/3}px`
})
})
}
}
}
}
有棱角的
.module（'应用程序'，[]）
.controller（'main'，main）
.指令（“瓷砖”，瓷砖）

---

问题在于，您正在将处理程序分配给

$window.onresize

，从而覆盖以前的所有处理程序

请尝试执行以下操作：

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

---

通过这种方式，您将绑定到

resize

事件，而不是为其分配单个处理程序。

问题在于您将处理程序分配给

$window.onresize

，从而覆盖以前的所有处理程序

请尝试执行以下操作：

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

---

通过这种方式，您将绑定到

调整大小

事件，而不是为其分配单个处理程序。

…您不使用flexbox有什么原因吗？是的，这是更复杂的一系列动画的第一步。作为

窗口。onresize

为使用

ng repeat

，因此它会被

tile

指令的每个元素覆盖，从而导致执行

窗口。onresize

被最后一个元素覆盖或分配…您不使用flexbox的原因是什么？是的，这是更复杂的动画系列的第一步

window.onresize

对使用

ng repeat

呈现的所有

tile

指令都有一个单一副本，因此它会被执行

window.onresize

指令的

tile

的每个元素覆盖，从而导致执行由最后一个元素覆盖或分配的

window.onresize

指令。很有道理，太棒了。这很有道理。