Angular refresh scope from service with initial data

Question

I have a service returning static JSON data saving to a $scope variable like this:

$scope.workout = Workouts.get(id);

I´m manipulation this $scope.workout with shift() and slice(). When I try to set $scope.workout to the initial data from the Service, this does not work.

$scope.workout = Workouts.get(id);

The $scope.workout has been changed. I thought that another call of the service would refresh the data? Am I wrong? How to get the initial data saved in the service?

What is inside the Workouts.get()? Is that using any non-angular asynchronous code? — Shashank Agrawal
– Shashank Agrawal, Commented Jul 21, 2016 at 12:49

DerekMT12 · Accepted Answer · 2016-07-21 12:53:27Z

1

If you're using this for an edit feature, make a copy of the object to make edits to so it doesn't affect the original.

$scope.workoutTarget = Workouts.get(id);
$scope.workout = angular.copy($scope.workout);

//you're free to make edits to $scope.workout without affecting the service

In your save function, commit the changes by merging the objects.

angular.merge($scope.workoutTarget, $scope.workout)

Now $scope.workoutTarget will have the edits applied to it.

answered Jul 21, 2016 at 12:53

DerekMT12

1,35911 silver badges15 bronze badges

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

4 Comments

Raghu Venmarathoor Over a year ago

I was typing a similar answer. Will it work? How could you make sure that the angular.copy is called after http get is resolved? I suspect that the $scope.workout will have an empty JSON all the time.

DerekMT12 Over a year ago

The OP said the get method is returning an object, not a promise.

Raghu Venmarathoor Over a year ago

I assumed that he was using $resource.

DerekMT12 Over a year ago

I thought it was asynchronous at first too, but his comment on the question says it's returning an object.

Ved · Accepted Answer · 2016-07-21 13:01:44Z

1

1 workaround can be, copy your $scope.workout to another Object and assign it back to $scope.workout.

$scope.workout = Workouts.get(id);

var copyObj = angular.copy($scope.workout);

edited Jul 21, 2016 at 13:01

answered Jul 21, 2016 at 12:49

Ved

12.1k5 gold badges46 silver badges61 bronze badges

1 Comment

Raghu Venmarathoor Over a year ago

Will it work? How could you make sure that the angular.copy is called after http get is resolved? I suspect that the copyObj will have an empty JSON all the time.

Suren Srapyan · Accepted Answer · 2016-07-21 13:02:38Z

0

The object is a reference type. So why you return it from the service, it returns it's reference. It means that you have 2 reference to the same object (from the service and in the scope). So if you change the object from one reference, it will be changed for another reference too.
You need to copy your object. Simply you can do it by

angular.copy(Workouts.get(id), $scope.workout);

And work with your $scope.workout in your controller.

edited Jul 21, 2016 at 13:02

answered Jul 21, 2016 at 12:46

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

4 Comments

m1crdy Over a year ago

I want to get exactly that object what I have hardcoded to my service. How to do that?

Suren Srapyan Over a year ago

@m1crdy see the edited.Can you please show your object ?

m1crdy Over a year ago

Got it: $scope.workout = angular.copy(Workouts.get($scope.workoutId), $scope.workout);

Suren Srapyan Over a year ago

@m1crdy no need to assign to $scope.workout again.

Zaid Al Shattle · Accepted Answer · 2016-07-21 12:44:36Z

0

While I am not sure where your code is wrong (I am not that great at AngularJS!) A quick hack you can use is this: Assign the initial data to to a new scope variable THEN assign your workout variable from our new scope variable. Now we can refresh workout from our new variable at any time.

answered Jul 21, 2016 at 12:44

Zaid Al Shattle

1,5441 gold badge12 silver badges24 bronze badges

Comments

nagrom97 · Accepted Answer · 2016-07-21 12:43:10Z

-1

You could try $route.reload to refresh the injected data.

answered Jul 21, 2016 at 12:43

nagrom97

5141 gold badge7 silver badges23 bronze badges

Collectives™ on Stack Overflow

Angular refresh scope from service with initial data

5 Answers 5

4 Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related