2013-08-12 3 views
4

J'utilise un service pour récupérer des données à partir d'une API:angulaire: service de mise à jour et partager des données entre les contrôleurs

angular.module('myApp', []) 
.factory('myService', function($q, $timeout) { 
    var getMessages = function() { 
     var deferred = $q.defer(); 

     $timeout(function() { 
      deferred.resolve('Hello world!'); 
     }, 2000); 

     return deferred.promise; 
    }; 

    return { 
    getMessages: getMessages 
    }; 

}); 

Et j'utiliser ces données dans plusieurs contrôleurs.

function ControllerA($scope, myService) { 
    $scope.message = myService.getMessages(); 
    $scope.updateMessage = function(){ 
     $scope.message = 'Hello Max';   
    }; 
} 

function ControllerB($scope, myService) { 
    $scope.message = myService.getMessages(); 
    $scope.$watch('message', function(){ 
     // 'Hello Max' 
    }, true); 
} 

Je voudrais mettre à jour les données dans chaque contrôleur, mais quand je change la scope.message de $ dans le ControllerA, il ne se déclenche pas un changement dans la ControllerB.

EDIT: Le problème est que je ne veux pas utiliser "$ broadcast" et "$ on".

Des idées?

Voici un jsFiddle: http://jsfiddle.net/Victa/McLQD/

Répondre

8

Vous pouvez utiliser $broadcast pour diffuser un événement au rootScope et utiliser $on pour définir l'auditeur d'écouter cet événement spécifique.

function ControllerA($scope, myService, $rootScope) { 
    $scope.message = myService.getMessages(); 
    $scope.updateMessage = function() { 
     $scope.message = 'Hello Max'; 

     $rootScope.$broadcast("HelloEvent", { 
      msg: $scope.message 
     }); 
    }; 
} 

function ControllerB($scope, myService, $rootScope) { 
    $scope.message = myService.getMessages(); 

    $rootScope.$on("HelloEvent", function (event, message) { 
     $scope.message = message.msg; 
    }); 
} 

Mise à jour:

J'obtenu la solution ci-dessus juste avant votre question mis à jour. Si vous ne souhaitez pas utiliser $ ou $ émission, vous pouvez partager l'objet via e $rootScop comme ce

function ControllerA($scope, myService, $rootScope) { 
    $scope.message = myService.getMessages(); 
    $scope.updateMessage = function() { 
     $scope.message = 'Hello Max'; 
     $rootScope.message = 'Hello Max'; 
    }; 
} 

function ControllerB($scope, myService, $timeout, $rootScope) { 
    $scope.message = myService.getMessages(); 

    $rootScope.$watch('message', function (oldV, newV) { 
     if(oldV === undefined && oldV === newV) return; 
     $scope.message = $rootScope.message; 
    }); 
} 

Demo using broadcast Demo without using broadcast

+0

Merci pour votre réponse, mais la chose est que je voudrais éviter d'utiliser "$ broadcast" et "$ on". – Vic

+0

@VictorCoulon Quand avez-vous mis à jour votre question ??? – zsong

+0

juste après votre publication – Vic

Questions connexes