getting and setting value in factory in angualrjs

Question

This is my factory:

.factory('userService',()){
  var user = {};
  return {

  getFirstname : function () {
    return user.firstname;
  },

  setFirstname : function (firstname) {
    user.firstname = firstname;
  }

}

And I'm using this service in my two controllers MainCtrl and AccountEditCtrl I'm using my getFirstname() in my MainCtrl and setFirstname in AccountEditCtrl

.controller('MainCtrl',['userService', function(userService){
  $scope.userName = userService.getFirstName();
}]);

.controller('AccountEditCtrl',['userService', function(userService){
      userService.setFirstname("New First Name");
}]);

My problem is that when I use the userService.setFirstname() the $scope.userName don't change in MainCtrl.

`$scope.userName = userService.getFirstName();` only gets called once when processed by the view. You have to update the view after a change. Maybe try `$watch` — frhd, Apr 21 '15 at 10:41
Please look here to get a better understanding: http://stackoverflow.com/a/15113029/2491198 — frhd, Apr 21 '15 at 10:46
also for an example of how to "share" variables across controllers: http://stackoverflow.com/questions/29757442/sharing-subtotal-across-controllers-in-angular/29757627#29757627 — Dominic Scanlan, Apr 21 '15 at 10:48
Yup I think I know what $watch is but I don't know what to watch. Should I watch $scope.userName or the user.firstname in the Factory? — devadnqpnd, Apr 21 '15 at 10:50
Can I use $emit ?? because here AccountEdit is a child of MainCtrl — devadnqpnd, Apr 21 '15 at 10:51

score 10 · Accepted Answer · answered Apr 21 '15 at 12:04

In some case $watch is not working with factory object. Than you may use events for updates.

 app.factory('userService',['$rootScope',function($rootScope){
  var user = {};
  return {

  getFirstname : function () {
    return user.firstname;
  },

  setFirstname : function (firstname) {
    user.firstname = firstname;
    $rootScope.$broadcast("updates");
  }

}
}]);
app.controller('MainCtrl',['userService','$scope','$rootScope', function(userService,$scope,$rootScope) {
  userService.setFirstname("bharat");
  $scope.name = userService.getFirstname();
  $rootScope.$on("updates",function(){
    $scope.name = userService.getFirstname();
  });
}]);

app.controller('one',['userService','$scope', function(userService,$scope) {
  $scope.updateName=function(){
    userService.setFirstname($scope.firstname);
  }
}]);

Here is a working example

thank you for your answer, I already solved my problem. My problem is not in my controller anymore it's in my view -.- — devadnqpnd, Apr 21 '15 at 13:22
no still not working now I have the data in Main but my view don't change — devadnqpnd, Apr 21 '15 at 13:30
You may use $timeout while firing event like $timeout(function(){ $rootScope.$broadcast("updates"); }); — Bharat Bhushan, Apr 23 '15 at 10:22

score 1 · Answer 2 · answered Apr 21 '15 at 11:37

1

When using same object across controllers ,you have to define your service using the .service method like below:

.service('userService',function(){
  this.user = {};

  this.getFirstname = function () {
    return this.user.firstname;
  };

  this.setFirstname = function (firstname) {
    this.user.firstname = firstname;
  };

});

answered Apr 21 '15 at 11:37

manasi sakhare

1,051
7
18

thank you for your answer, I already solved my problem. My problem is not in my controller anymore it's in my view -.- – devadnqpnd Apr 21 '15 at 13:22

Subhash Kumar · Answer 3 · 2015-04-23T11:18:37.163

Use $timeout for broadcast event. it will help you.

app.factory('userService',['$rootScope', "$timeout", function($rootScope, $timeout){
var user = {};
return {

getFirstname : function () {
    return user.firstname;
},

setFirstname : function (firstname) {
    user.firstname = firstname;
    $timeout(function(){
        $rootScope.$broadcast("updates");
    }, 1000)
}

}
}]);
app.controller('MainCtrl',['userService','$scope','$rootScope', function(userService,$scope,$rootScope) {
userService.setFirstname("bharat");
$scope.name = userService.getFirstname();
$rootScope.$on("updates",function(){
    $scope.name = userService.getFirstname();
});
}]);

app.controller('one',['userService','$scope', function(userService,$scope) {
$scope.updateName=function(){
    userService.setFirstname($scope.firstname);
}
}]);

Shashank Agrawal · Answer 4 · 2015-04-21T11:32:52.967

0

You have two options to overcome this problem.

Solution 1st:

Adding a watch in your controller.

.controller('MainCtrl',['userService', function(userService) {

    $scope.userName = userService.getFirstName();

    $scope.$watch(function() {
        return userService.getFirstName();
    }, function(newValue) {
       $scope.username = newValue;
    });
}]);

Solution 2nd:

.controller('MainCtrl',['userService', function(userService) {

    $scope.getUsername = function() {
        userService.getFirstName();
    };

}]);

Now your view should directly call this function.

<div class="username">{{getUsername()}}</div>

Now, according to Angular's doc, whenever the return value from a function call changes, Angular will update the values in the view.

edited Apr 21 '15 at 11:32

answered Apr 21 '15 at 10:57

Shashank Agrawal

25,161
11
89
121

what does top level scope view mean?? – devadnqpnd Apr 21 '15 at 11:28
Sorry, never mind. It was a confusing line. I've removed it. This will work. – Shashank Agrawal Apr 21 '15 at 11:33
Okay, no worries. Can you please explain, how both controllers are scopped or how they are used in this case? – Shashank Agrawal Apr 21 '15 at 11:44
All I know is that MainCtrl is the parent of AccounEditCtrl, I use AccountEditCtrl to edit the account of the user then change name in the navbar – devadnqpnd Apr 21 '15 at 11:45
So, for a current page on which you are facing this problem, both controller scopes are available i.e. `MainCtrl` is at body tag and `AccounEditCtrl` is at some div (for an example). Am I correct? – Shashank Agrawal Apr 21 '15 at 11:47
Okay, this should work then. Can you please provide a plunkr or jsfiddle example? – Shashank Agrawal Apr 21 '15 at 12:04
sorry but i don't know how to use those – devadnqpnd Apr 21 '15 at 12:55
thank you for your answer, I already solved my problem. My problem is not in my controller anymore it's in my view -.- – devadnqpnd Apr 21 '15 at 13:22

score 0 · Answer 5 · answered Jun 13 '17 at 14:36

sample factory with getter and setter example code

<div ng-app="myApp">
<div ng-controller="FirstCtrl">
  <br>Input is : <strong>{{data.firstName}}</strong>
  <button ng-click="setData()">setData</button>
</div>
<hr>

<div ng-controller="SecondCtrl">
  Input should also be here: {{data.firstName}}
  <button ng-click="getData()">getData</button>
</div>
</div>

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){

    var service = {
        FirstName: '',
        setFirstName: function(name) {
            // this is the trick to sync the data
            // so no need for a $watch function
            // call this from anywhere when you need to update FirstName
            angular.copy(name, service.FirstName); 
        }
    };
    return service;
});


// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){
$scope.setData = function() {
        Data.FirstName='Tridip';
    };
});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;

$scope.getData = function() {
        alert('get data '+Data.FirstName)
    };
});

score -1 · Answer 6 · answered Apr 21 '15 at 11:10

you should use $ watch so:

.factory('userService',()){
  return {
     user:{ 'firstname': 'defaultFirstname'},
     getFirstname : function () {
       return user.firstname;
     },

     setFirstname : function (firstname) {
       user.firstname = firstname;
     }
}
.controller('MainCtrl',['userService', function(userService){
  $scope.userName = userService.getFirstname();
  $scope.$watch('userService.user.firstname', function (newVal) {
      $scope.userName = newVal;
  });
}]);

.controller('AccountEditCtrl',['userService', function(userService){
      userService.setFirstname("New First Name");
}]);

getting and setting value in factory in angualrjs

6 Answers6

Linked