AngularJS - Factory variable doesn't update in controller

Question

I'm facing a new issue with AngularJS. Infact, since I need to have a "shared" variable, readable and updatable in 2 controllers, I thought about doing that with a factory injected in both the controllers. The data are loaded via http request, but once the request is completed, the var just doesn't update. Here's my code:

  //Common factory
  app.factory('CurrentGallery',['$q','$http',function($q,$http){
    var data = null;

    //HTTP request to API
    var loadImages = function(query){
      $http.post("https://mywebsite.com/api/?"+query).then(function(result){
        update(result.data);
      });
    }

    //Update the data var
    var update = function(data){
      data = data;
      console.log("Update called", data);
    }

    return {
      loadImages: loadImages,
      update: update,
      data: data
    }
  }]);

  //The controller
  app.controller("PhotoBestController", ['$scope', 'CurrentGallery', function ($scope,CurrentGallery) {
    //$scope.pics is basically the variable I want to update inside my controller
    $scope.pics = CurrentGallery.data;

    //Send the data of the query for the API
    CurrentGallery.loadImages("userInfo=true&exifInfo=true&order=tot_like,DESC");

    $scope.$watch(CurrentGallery, function(){
      console.log("CurrentGallery has changed");
    });
  }]);

This is the log I get in my console:

CurrentGallery has changed
Update called, Object{...}

So it seems the CurrentGallery get updated the very first time, when it's null, but then, even if it gets updated inside the factory, it doens't update the $scope.pics var.

Any suggestions?

this might help you http://stackoverflow.com/questions/30596258/watch-factory-variable-with-angular — Vinod Louis, Jan 20 '17 at 09:22
@VinodLouis it dosn't seem to solve the problem! It gives exactly the same result, so nothing updates — Wendigo, Jan 20 '17 at 09:40

score 0 · Accepted Answer · edited May 23 '17 at 11:45

UPDATE
I followed the code logic in this thread: AngularJS : How to watch service variables?

app.factory('CurrentGallery',['$q','$http',function($q,$http) {
  var updateCallbacks = [];
  var data = null;

  var loadImages = function(query) {   
    $http.post("https://mywebsite.com/api/?"+query).then(function(result) {
      angular.forEach(updateCallbacks, function(callback) {
        callback(result.data);
      });
    });
  }

  var registerUpdateCallback(callback) {
    updateCallbacks.push(callback);
  }

  return {
    loadImages: loadImages,
    registerUpdateCallback: registerUpdateCallback
  }
}]);

app.controller("PhotoBestController", ['$scope', 'CurrentGallery', function($scope,CurrentGallery) {      
  CurrentGallery.registerUpdateCallback(function(data) {
    console.log("updated")
  });
  CurrentGallery.loadImages("userInfo=true&exifInfo=true&order=tot_like,DESC");
}]);

Yes, I thought about it, but in case I use a promise, then how can I detect the change in a potential 2nd controller with whom I want to share the CurrentGallery.data var? — Wendigo, Jan 20 '17 at 09:39

score 0 · Answer 2 · edited Sep 05 '18 at 11:20

0

I think your data is updated in factory only. So for updating it in controller you have to get it again from the factory.

So where you put watch in your controller re-assign the scope variable:

$scope.$watch(CurrentGallery, function(){
      $scope.pics = CurrentGallery.data;
      console.log("CurrentGallery has changed");
});

edited Sep 05 '18 at 11:20

Maen

10,603
3
45
71

answered Jan 20 '17 at 10:06

sonu singhal

211
1
6

That's what I did, but it didn't even fire the log "CurrentGallery has changed" – Wendigo Jan 20 '17 at 10:16
That is not mandatory it was in your code you have posted so that i kept it here. So is it worked or not. – sonu singhal Jan 20 '17 at 10:23

AngularJS - Factory variable doesn't update in controller

2 Answers2