AngularJS:当元素的属性发生变化时强制重复更新

时间:2015-05-14 23:26:26

标签: angularjs ng-map

我正在与角度表的阵列进行摔跤。我有以下标记:

<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>

pins()返回的每个引脚都有许多属性,子属性等。其中一个子属性控制标记颜色。当该子属性发生变化时,我希望UI更新。

因为ng-repeat似乎是基于对集合的简单更改来监视,所以如何实现这一目标并不明显。我认为我的跟踪功能iconKey()会这样做,因为它会根据子属性的值返回不同的值。但那没用。

另一件事:从一个在指令下运行的$ interval回调中,子属性发生了变化。我提到这一点是因为,在之前的帖子中,有人认为可能存在上下文/范围问题。

但是,即使我在UI控制器中的事件监听器中进行了更改(事件在$ interval回调的“success”子句中引发),它仍然不起作用。

这就是为什么我认为问题只是棱角分明没有注意到iconKey()的变化;它的表现就像所有的$ ng手表一样,ng-repeat是数组的长度。当子属性发生变化时,这不会改变。

更新

我创造了一个能够展示我面临的问题的傻瓜。您可以在http://plnkr.co/edit/50idft4qaxqw1CduYkOd

找到它

这是我正在构建的应用程序的缩减版本,但它包含基本元素(例如,用于保存有关地图引脚的信息的数据上下文服务以及用于切换其中一个引脚的子属性的$ interval服务数组元素)。

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

如果您在测试周期中在第22行中断,您将看到返回的图钉图标。因此,角度内的某些东西需要信息......但是引脚颜色不会改变。

我期待有人能够迅速指出与我的任何理论无关的骨头错误:)。对于我穿的任何眼罩都要提前道歉。

更新2

在检出响应中的代码片段后,我简化了我的plnkr,并证明了角度实际上是在子属性发生变化时更新UI。所以这似乎是ng-map中的限制或错误。

1 个答案:

答案 0 :(得分:5)

你在这里缺少的是数组和函数的概念你的函数pins()传递一个数组,并且该数组已经与ng-repeat绑定。但这里残酷的事实是,无论数组从未改变过,因为你没有任何对该数组的引用,因此rg-repeat将始终保持原样...

我建议尝试以两种方式引用数组

ng-init="pinsArray = pins()"

和第二个内部控制器

$scope.pinsArray = $scope.pins()

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

ng-repeat将更改为

ng-repeat="pin in pinsArray"

还会阅读有关过滤器的信息,我猜这是你在哪里尝试做什么&#34;跟踪&#34;

希望这会有所帮助..

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

似乎没有观察子属性。 所以这是一个解决方法

添加以下语句,在更改其属性后更新pinsArray。

pinsArray = angular.copy(pinsArray);

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