Update controller variable on Updating Angular factory variable

Question

Hi I have got one question. I have got one object as following in my Factory

User: {
   EmailAddress: ""
}

whenever i make http call I want to update that User.EmailAddress whith returned value. What is the best way of doing it in within the factory? so that at controller level I can just bind my $scope.Email to factory variable. This is what I am doing right now

GetLogOnModel: function () {
    if ($location.path().indexOf("login") == 1) {
        var promise = $http.get(config.headers.url + "LogOn").then(function (response) {
            // The return value gets picked up by the then in the controller.
            User.EmailAddress=response.data.Email;
            return response.data
        });
        return promise;
        // Return the promise to the controller
    }
}

And in Controller

AccountFactory.GetLogOnModel().then(function (data) {
  $scope.logOnModel = data;
}, function (err) {
  console.log(err.reason);
  alert(err.reason);
});

Is the factory variable getting updated outside the controller ? — Shidhin Cr
– Shidhin Cr, Commented Apr 7, 2014 at 7:47
@ShidhinCr Yes I am updating it within the factory itself... — Atul Chaudhary
– Atul Chaudhary, Commented Apr 7, 2014 at 7:49
Do i have to apply $scope.watch if yes then almost in every controller I have to do that? which i think is not a good idea..as it is against DRY.. — Atul Chaudhary
– Atul Chaudhary, Commented Apr 7, 2014 at 7:52
I guess you might need to have a $watch. I have seen others also doing the same only — Shidhin Cr
– Shidhin Cr, Commented Apr 7, 2014 at 7:53

gkalpak · Accepted Answer · 2016-07-20 05:17:50Z

14

Primitive types (such as strings) are not bound by reference. So you can't bind a scope property to EmailAddress directly and expect it to get automatically updated.
Objects on the other hand are bound by reference, so you could do something like this:

app.factory('AccountFactory', function (...) {
  ...
  var User = {
    ...
    EmailAddress: null
  };

  function getLogOnModel() {
    $http.get(...).then(function (response) {
      User.EmailAddress = response.data.Email;
    });
  }

  // Init model (or leave it for the controller to init it)
  getLogOnModel();

  return {
    ...
    User: User,
    getLogOnModel: getLogOnModel
  };
});

app.controller('someCtrl', function (..., AccountFactory) {
  $scope.user = AccountFactory.User;
  // Now you can reference `$scope.user.EmailAddress`
  // and it will be kept in sync with `AccountFactory.User.EmailAddress`
});

edited Jul 20, 2016 at 5:17

answered Apr 7, 2014 at 8:03

gkalpak

48.2k8 gold badges108 silver badges120 bronze badges

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

6 Comments

Atul Chaudhary Over a year ago

Thanks that solved my part of problem....another problem is I am returning an empty model from backend and want to achieve the same

gkalpak Over a year ago

Sorry, I don't get this other problem with empty model.

Atul Chaudhary Over a year ago

This my another question with your example code(bit modified though) stackoverflow.com/questions/22911354/…

gkalpak Over a year ago

I'll take a look. Please, accept this answer if you think it solves the first problem.

Steve Rogers Over a year ago

This is absolutely correct. Thanks for the reminder. :)

|

codef0rmer · Accepted Answer · 2014-04-07 09:35:51Z

It should be pretty straight forward. Either you bind the instance of the service or just the email property to the $scope.

Here I'm just updating the email after 5 secs.

myApp.factory('myService', function($http, $timeout) {
    return {
        email: '[email protected]',
        updateEmail: function() {
            var self = this;
            $timeout(function() {                
                $http.get('/echo/json/').success(function() {
                    self.email = '[email protected]';
                });
            }, 5000);
        }
    };
});

1st Method: Bind the entire service on the scope as:

function MyCtrl($scope, myService) {
    $scope.myService = myService;
    myService.updateEmail();
});

<div ng-controller="MyCtrl">
  myService: {{myService.email}}! 
</div>

2nd Method Just create a custom $watch for email updates:

function MyCtrl($scope, myService) {
    $scope.email = myService.email;
    myService.updateEmail();

    $scope.$watch(function() { return myService.email; }, function(newVal, oldVal) {
       $scope.email = newVal;
    });
}

<div ng-controller="MyCtrl">
  $scope: {{email}}
</div>

I would recommend the first method because it requires only one $watch to update the DOM i.e. for {{myService.email}} whereas the second method requires two $watches i.e. one to update the $scoped model ($scope.$watch) and other to update the DOM as {{email}}.

Demo: http://jsfiddle.net/HB7LU/3015/

The first method works out for me pretty well. I'm new to AngularJs. This really helps.

Collectives™ on Stack Overflow

Update controller variable on Updating Angular factory variable

2 Answers 2

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related