6

我正在与角度手表阵列的方式搏斗。我有以下标记：

<map name="theMap" center="{{mapInfo.center.toUrlValue()}}" zoom="{{mapInfo.zoom}}" on-dragend="dragEnd()" on-zoom_changed="zoomChanged()">
    <marker ng-repeat="pin in pins() track by pin.iconKey()" position="{{pin.latitude}}, {{pin.longitude}}" title="{{pin.streetAddress}}" pinindex="{{$index}}" on-click="click()" 
            icon="{{pin.icon()}}"></marker>
</map>

pin() 返回的每个单独的 pin 都有许多属性、子属性等。其中一个子属性控制标记颜色。当该子属性更改时，我希望 UI 更新。

因为 ng-repeat 似乎 $watch 只是基于对集合的更改，所以如何实现这一点并不明显。我认为我的跟踪函数 iconKey() 会这样做，因为它根据子属性的值返回不同的值。但这没有用。

另一件事：子属性在回调中从在指令下运行的 $interval 更改。我之所以提到这一点，是因为在之前的一篇文章中，有人认为可能存在上下文/范围问题。

但是，即使我在 UI 控制器中的事件侦听器中进行了更改（事件在 $interval 回调的“成功”子句中引发），它仍然不起作用。

这就是为什么我认为问题只是角度没有注意到 iconKey(); 的变化。它的行为就像 ng-repeat 的所有 $watches 都是数组的长度。子属性更改时不会更改。

更新

我创建了一个 plunker 来演示我面临的问题。您可以在http://plnkr.co/edit/50idft4qaxqw1CduYkOd找到它

这是我正在构建的应用程序的精简版本，但它包含基本元素（例如，保存有关地图引脚信息的数据上下文服务和用于切换引脚数组元素之一的子属性的 $interval 服务） .

您可以通过单击菜单栏中的开始来开始更新周期（您可能需要稍微向下拖动地图以将两个图钉都放在完整视图中）。它应该切换每个引脚的颜色，或者，每个 5 次，每 2 秒一次。它通过在控制器中定义的侦听器中切换 pin 对象的 isDirty 属性的值来实现这一点。该事件由 $interval 服务引发。

如果您在测试周期中中断第 22 行，您将看到返回的图钉图标。所以角度内的东西正在要求信息......但引脚颜色没有改变。

我期待有人迅速指出与我的任何理论无关的愚蠢错误:)。提前为我戴的任何眼罩道歉。

更新 2

在查看响应中的代码片段后，我简化了我的 plnkr 并证明 angular 实际上是在子属性更改时更新 UI。所以这似乎是 ng-map 中的一个限制或错误。

4

1 回答 1

5

您在这里缺少的是数组和函数的概念，您的函数 pins() 传递了一个数组，并且该数组与 ng-repeat 绑定。但这里残酷的事实是，无论该数组是什么，都永远不会改变，因为您没有对该数组的任何引用，因此 rg-repeat 将始终保持原样......

我会建议尝试让数组被引用两种方法来做到这一点

ng-init="pinsArray = pins()"

和第二个内部控制器

$scope.pinsArray = $scope.pins()

然后对控制器内的 $scope.pinsArray 进行更改

ng-repeat 将更改为

ng-repeat="pin in pinsArray"

还阅读了有关过滤器的信息，我猜这就是您尝试使用“track by”所做的事情

希望这可以帮助..

编辑：使用 ngMap 标记的不同故事

好像它不看子属性。所以这里有一个解决方法

在更改其属性后，向您添加以下语句来更新 pinsArray。

pinsArray = angular.copy(pinsArray);

已解决的 plnkr 示例： http ://plnkr.co/edit/EnW1RjE9v47nDpynAZLK?p=preview

于 2015-05-14T23:37:45.763 回答