angularjspromisefactoryshared-data

Shared data between controllers using factory and promises


Ok so there is a lot out there about sharing data between controllers using factory/service, but I'm not finding what applies to my issue. Either I'm interpreting the answers incorrectly or this is a valid question I'm about to ask! Hopefully the latter.

I would like controller 2 to recognize when a new http call has been made and the factory images object has been updated. at the moment it resolves once and then ignores any subsequent updates. What am i overlooking?

My view:

<div>
    <ul class="dynamic-grid" angular-grid="pics" grid-width="150" gutter-size="0" angular-grid-id="gallery" refresh-on-img-load="false" >
        <li data-ng-repeat="pic in pics" class="grid" data-ng-clock>
            <img src="{{pic.image.low_res.url}}" class="grid-img" data-actual-width = "{{pic.image.low_res.width}}"  data-actual-height="{{pic.image.low_res.height}}" />
        </li>
    </ul>
</div>

factory:

.factory('imageService',['$q','$http',function($q,$http){

  var images = {}
  var imageServices = {};
  imageServices.homeImages = function(){
    console.log('fire home images')
      images = $http({
        method: 'GET', 
        url: '/api/insta/geo',
        params: homeLoc
      })
  };
  imageServices.locImages = function(placename){
    console.log('fire locImages')
      images = $http({
        method: 'GET', 
        url: '/api/geo/loc',
        params: placename
      })
  };
  imageServices.getImages = function(){
    console.log('fire get images', images)
    return images;  
  }
  return imageServices;
}]);

controller1:

angular.module('trailApp.intro', [])

.controller('introCtrl', function($scope, $location, $state, showTrails, imageService) {
  // run the images service so the background can load
  imageService.homeImages();

  var intro = this;

  intro.showlist = false;
  intro.data = [];

  //to get all the trails based on user's selected city and state (collected in the location object that's passed in)
  intro.getList = function(location) {

      intro.city = capitalize(location.city);
      intro.state = capitalize(location.state);
      //get placename for bg

      var placename = {placename: intro.city + ',' + intro.state};
      imageService.locImages(placename);
... do other stuff...

controller2:

angular.module('trailApp.bkgd', [])
.controller('bkgdCtrl', ['$scope','imageService', 'angularGridInstance', function ($scope,imageService, angularGridInstance) {
  $scope.pics = {};
    imageService.getImages().then(function(data){
      $scope.pics = data;
      console.log($scope.pics);
    });
}]);

Solution

  • Your controller2 implementation only got the images once, you probably need a $watch to keep to updated:

    angular.module('trailApp.bkgd', [])
    .controller('bkgdCtrl', ['$scope','imageService', 'angularGridInstance', function ($scope,imageService, angularGridInstance) {
      $scope.pics = {};
    
      $scope.$watch(function(){
        return imageService.getImages(); // This returns a promise
      }, function(images, oldImages){
        if(images !== oldImages){ // According to your implementation, your images promise changes reference
          images.then(function(data){
            $scope.pics = data;
            console.log($scope.pics);
          });
        }
      });
    
    }]);