Angular $watch array and update from server

Question

I'm deep watching an array called $scope.route.waypoints using the following:

$scope.$watch('route.waypoints',  _.debounce(function (prev, cur) {
    if(!$scope.initialized) return;
    $scope.saveRoute(true);
    console.log('route waypoints DEEP check');
}, 500), true)

in my saveRoute method I PUT the collection to the server.

What I want to do is upon return from the server I want to update some properties in my waypoints collection again. But when I update using the following:

if(data.linked && data.linked.waypoints.length){
        $scope.route.waypoints = data.linked.waypoints;
}else{
        $scope.route.waypoints = [];
}

$scope.route.days = data.routes[0].days;

the $watch is called again and the whole thing starts over again. How can I avoid that? I tried using $scope flags but it seems they are ignored again. it's all a bit of a mess now...

Avag Sargsyan · Accepted Answer · 2016-10-26 09:11:56Z

1

You can use different variables vor this data. For example for data which are coming from server you can use

$scope.route.waypoints

and for your local domain data you can use another domain, for example:

$scope.route.waypointsData

And in that case you will have the more controll because your server data and your local data will be seperated

UPDATE 1

so my suggestion IS

$scope.$watch('route.waypoints',  _.debounce(function (prev, cur) {
  //update data in this place  $scope.route.waypointsData 
}, 500), true)

then also turn watcher on

$scope.$watch('route.waypointsData ',  _.debounce(function (prev, cur) {
  // do your PUT method in that place 
}, 500), true)

and in ng-repeat use waypointsData. You are syncing data between models manually.

edited Oct 26, 2016 at 9:11

Avag Sargsyan

2,5194 gold badges33 silver badges45 bronze badges

answered Aug 20, 2014 at 7:34

Narek Mamikonyan

4,6112 gold badges27 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

tomvo Over a year ago

Yeah but I need this one waypoints collection because it is used for displaying in the interface. It's an ng-repeat of all those waypoints on a map as well as a sidebar. I think it will get much more complicated when I do it like you suggest. Also, upon next edit of this waypoint I want the collection to be updated again, and again..

Narek Mamikonyan Over a year ago

in view you can use your waypointsData , and when $scope.route.waypoints fired you can update your local data

tomvo Over a year ago

I'm not quite sure if I understand what you mean. I use waypointsData for ng-repeat/ng-model and then $watch(waypoints). But I also want to trigger an update to the server when the user edits the waypoint in the interface. So in that case I should also watch waypointsData which then updates waypoints again. Which results in the same problem right?

Narek Mamikonyan Over a year ago

no you can update server in waypointsData watcher, and waypoints will be responsible only for updating data from server

tomvo Over a year ago

sorry man but I don't get it. Can you maybe update your answer to make clear what you mean? How can I watch(wpData) and then only update waypoints on return when that should be represented in the same array?

|

tomvo · Accepted Answer · 2014-08-25 20:01:53Z

0

Ok I solved this by throwing away the $watches in general. After reading this excellent article: http://www.benlesh.com/2013/10/title.html I dediced to move all to ng-change directives and execute when necessary. The $watches introduced a non-testable magic that was the origin of my problem, it was just not readable anymore.

answered Aug 25, 2014 at 20:01

tomvo

1,4291 gold badge12 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular $watch array and update from server

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related