Gemeinsame Daten zwischen den Controllern mit Factory und verspricht

Question

Ok, es gibt eine Menge draußen über die Freigabe von Daten zwischen den Controllern mit Factory/Service, aber ich finde nicht, was für mein Problem gilt. Entweder interpretiere ich die Antworten falsch oder es handelt sich um eine gültige Frage, die ich stellen möchte! Hoffentlich letzteres.

Ich möchte, dass Controller 2 erkennt, wenn ein neuer http-Aufruf erfolgt ist und das Factory-Images-Objekt aktualisiert wurde. Im Moment löst es einmal auf und ignoriert dann nachfolgende Aktualisierungen. Was übersehe ich?

Meine Ansicht:

<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> 

Fabrik:

.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); 
    }); 
}]); 

Answer 1

Ihre controller2 Implementierung nur die Bilder einmal bekam, müssen Sie wahrscheinlich einen $watch auf dem Laufenden halten:

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); 
     }); 
    } 
    }); 

}]);