value change in all controller when use service in angularjs

Question

As you can see code , i am fetching value using service . I am fetching records using service in AnotherCtrl and then add one more record in $scope and that value is also change in MyCtrl, but i don't want to update scope of MyCtrl.

var app = angular.module("MyApp", []);

app.factory("UserService", function() {
  var users = ["Peter", "Daniel", "Nina"];

  return {
    all: function() {
      return users;
    },
    first: function() {
      return users[0];
    }
  };
});

app.controller("MyCtrl", function($scope, UserService) {
debugger;
  $scope.users = UserService.all();  
});

app.controller("AnotherCtrl", function($scope, UserService) {
debugger;
  $scope.firstUser = UserService.all();
  $scope.firstUser.push('chirag');
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app="MyApp">
  <div ng-controller="MyCtrl">
    <ul ng-repeat="user in users">
      <li>{{user}}</li>
    </ul>
    <div class="nested" ng-controller="AnotherCtrl">
      First user: {{firstUser}}
    </div>
  </div>
</body>

adutu · Accepted Answer · 2017-10-11 14:09:34Z

2

UserService is a singleton and you are returning an object so it's going to get updated. If you don't want to get updated then just copy it

Change

$scope.users = UserService.all();

to

$scope.users = angular.copy(UserService.all());

answered Oct 11, 2017 at 14:09

adutu

4015 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

value change in all controller when use service in angularjs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related