ng map - AngularJS: Force ng-repeat update when property of an element changes -
i'm wrestling way angular watches arrays. have following markup:
<map name="themap" center="{{mapinfo.center.tourlvalue()}}" zoom="{{mapinfo.zoom}}" on-dragend="dragend()" on-zoom_changed="zoomchanged()"> <marker ng-repeat="pin in pins() track pin.iconkey()" position="{{pin.latitude}}, {{pin.longitude}}" title="{{pin.streetaddress}}" pinindex="{{$index}}" on-click="click()" icon="{{pin.icon()}}"></marker> </map>
each individual pin returned pins() has number of properties, sub-properties, etc. 1 of sub-properties controls marker color. when subproperty changes want ui update.
because ng-repeat appears $watch based on changes collection it's not obvious how achieve that. thought tracking function, iconkey(), because returns different value depending upon subproperty's value. didn't work.
one other thing: subproperty gets changed in callback $interval runs under directive. mention because, in earlier post, thought there might context/scope problem.
however, when make change in event listener within ui's controller (where event raised within "success" clause of $interval callback) still doesn't work.
that's why think problem angular not noticing change in iconkey(); it's acting $watches ng-repeat array's length. doesn't change when subproperty changes.
update
i've created plunker demonstrate issue i'm facing. can find @ http://plnkr.co/edit/50idft4qaxqw1cduykod
it's cut down version of app i'm building, contains essential elements (e.g., data context service hold information map pins , $interval service toggle subproperty of 1 of pin array elements).
you start update cycle clicking start in menu bar (you may want drag map down put both pins full view). should toggle color of each pin, alternatively, 5 times each, once every 2 seconds. toggling value of isdirty property of pin object in listener defined in controller. event raised $interval service.
if break on line 22 during test cycle you'll see pin's icon being returned. within angular calling information...but pin color doesn't change.
i forward pointing out bone-headed mistake has nothing of theories :). apologies in advance whatever blinders i'm wearing.
update 2
after checking out code snippet in response simplified plnkr , demonstrated angular is, in fact, updating ui when subproperty changes. appears limitation or bug in ng-map.
what missing here concept of array , function function pins() passes array , array been bound ng-repeat. brutal fact here no matter array never changed, because not have reference array hence rg-repeat remain is...
i'll suggest try array referenced 2 ways
ng-init="pinsarray = pins()"
and second inside controller
$scope.pinsarray = $scope.pins()
then make changes $scope.pinsarray inside controller
ng-repeat changed
ng-repeat="pin in pinsarray"
also read filters guessing that's trying "track by"
hope helps..
edit: different story ngmap markers
seems doesn't watch sub-property. here's work around
add following statement update pinsarray after making changes properties.
pinsarray = angular.copy(pinsarray);
the solved plnkr example: http://plnkr.co/edit/enw1rje9v47ndpynazlk?p=preview
Comments
Post a Comment