AngularJS - Controller variable not updating from a service function

Question

I have this variable that is being controlled by the Factory and to update the Controller but it's not happening.

Here is what I have:

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

app.controller('AppController', function($scope, AppFactory) {
  var vm = this;

  $scope.serverStatus = AppFactory.getStatus();
});

app.factory('AppFactory', function($timeout) {

  var AppFactory = {};
  var vm = this;
  vm.serverStatus = true;

  // Execute after 2 seconds of page start
  $timeout(function() {
    AppFactory.setStatus(false);
  }, 2000);

  AppFactory.setStatus = function(status) {
    console.log('Server set to ' + status);
    vm.serverStatus = status;

    // Getting server status = false
    AppFactory.getStatus();
  };


  AppFactory.getStatus = function() {
    console.log('Getting server status: ' + vm.serverStatus);
    return vm.serverStatus;
  };

  return AppFactory;
});

LIVE PLUNKER DEMO: https://plnkr.co/edit/62xGw7Klvbywp9TODWF4?p=preview

Do you think Directives would work better with 2-way-communication between a factory and controller?

Broadcast through events when server status changes.Make an EventEmitter service, and when status changes emit the value then subscribe in controller to get the latest value through this event. If you need further help I might provide code hint. — Bettimms
– Bettimms, Commented May 8, 2016 at 18:10

UzUmAkI_NaRuTo · Accepted Answer · 2016-05-08 18:16:33Z

1

Check this edited the plunkr https://plnkr.co/edit/z6tdr5?p=preview

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

app.controller('AppController', function($scope,$timeout, AppFactory) {
  var vm = this;

  $timeout(function() {
    AppFactory.setStatus(false);
    $scope.serverStatus = AppFactory.getStatus();
  }, 2000);

  $scope.serverStatus = AppFactory.getStatus();
});

app.factory('AppFactory', function($timeout) {

  var AppFactory = {};

  var serverStatus = true;

  // Execute after 2 seconds of page start


  return {
        getStatus: function () {

          //console.log('Getting server status: ' + vm.serverStatus);
          return serverStatus;
        },
        setStatus : function(status) {
          var vm = this;
        console.log('Server set to ' + status);
        serverStatus = status;

        // Getting server status = false
        vm.getStatus();
  }
  };
});

edited May 8, 2016 at 18:16

answered May 8, 2016 at 18:11

UzUmAkI_NaRuTo

5753 gold badges9 silver badges20 bronze badges

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

3 Comments

UzUmAkI_NaRuTo Over a year ago

directives would be a better option if you need to manipulate DOM frequently and with complex structure/data EDIT please take a note how the service functions are written. hope it helps

test Over a year ago

I would want the timeout call to be from the factory instead of the controller

UzUmAkI_NaRuTo Over a year ago

@nn2 why do you need timeout in service any specific reason ? because timeout from controller is also going to trigger on page load itself. do you want to trigger it in service? or just keep timeout function in service? you can just trigger timeout anytime from controller if you put it in service function. Optionally if you want it to trigger on any html div load you can do that to using ng-init . i can modify the example according to what you want

uglycode · Accepted Answer · 2016-05-08 18:17:51Z

Here's a solution that uses events, e.g.:

app.controller('AppController', function($scope, AppFactory) {
  var vm = this; 

  $scope.$on('messageOne', function(event, data){
    console.log(data);
      $scope.serverStatus = data;
      $scope.$apply(); //I think $apply() is not needed here!
  });

  $scope.serverStatus = AppFactory.getStatus();


});

app.factory('AppFactory', function($timeout, $rootScope) {

  var AppFactory = {};
  var vm = this;
  vm.serverStatus = true;

  // Execute after 2 seconds of page start
  $timeout(function() {
    AppFactory.setStatus(false);
  }, 2000);

  AppFactory.setStatus = function(status) {
    console.log('Server set to ' + status);
    vm.serverStatus = status;

    // Getting server status = false
    //AppFactory.getStatus();

    $rootScope.$broadcast('messageOne', status);
  };


  AppFactory.getStatus = function() {
    console.log('Getting server status: ' + vm.serverStatus);
    return vm.serverStatus;
  };

  return AppFactory;
});

https://plnkr.co/edit/pARMnE3Wl0OeJezKuvLT?p=info

Collectives™ on Stack Overflow

AngularJS - Controller variable not updating from a service function

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related