$scope.$émettre et .$dans AngularJS

Question

Comment puis-je envoyer mon $scope objet à partir d'un contrôleur à l'autre à l'aide d' .$emit et .$on méthodes?

function firstCtrl($scope)
{
    $scope.$emit('someEvent', [1,2,3]);
}

function secondCtrl($scope)
{
    $scope.$on('someEvent', function(mass) { console.log(mass); });
}

Il ne fonctionne pas de la façon dont je pense qu'il devrait. Comment puis - $emit et $on travail?

Answer 1

Tout d'abord, parent-enfant, la portée de la relation. Vous avez deux possibilités pour émettre certains cas:

• $broadcast -- distribue l'événement vers le bas pour tous les enfants étendues,
• $emit -- distribue l'événement vers le haut à travers le champ d'application de la hiérarchie.

Je ne sais rien à propos de vos contrôleurs (étendues) relation, mais il y a plusieurs options:

1. Si la portée de l' firstCtrl est parent de l' secondCtrl de la portée, votre code doit travail en remplaçant $emit par $broadcast en firstCtrl:

   function firstCtrl($scope)
   {
       $scope.$broadcast('someEvent', [1,2,3]);
   }
   
   function secondCtrl($scope)
   {
       $scope.$on('someEvent', function(event, mass) { console.log(mass); });
   }
   

2. Dans le cas où il n'existe pas de relation parent-enfant entre votre étendues que vous peut injecter $rootScope sur le contrôleur et diffuser l'événement pour tous les enfants étendues (c'est à dire aussi secondCtrl).

   function firstCtrl($rootScope)
   {
       $rootScope.$broadcast('someEvent', [1,2,3]);
   }
   

3. Enfin, lorsque vous avez besoin pour l'envoi de l'événement de contrôleur enfant pour les étendues vers le haut, vous pouvez utiliser $scope.$emit. Si la portée de l' firstCtrl est parent de l' secondCtrl portée:

   function firstCtrl($scope)
   {
       $scope.$on('someEvent', function(event, data) { console.log(data); });
   }
   
   function secondCtrl($scope)
   {
       $scope.$emit('someEvent', [1,2,3]);
   }
   

Answer 2

Je voudrais en outre suggérer une 4ème option comme une meilleure alternative pour les options proposées par @zbynour.

Utiliser $rootScope.$emit plutôt que d' $rootScope.$broadcast , indépendamment de la relation entre trasmitting et la réception de contrôleur. De cette façon, l'événement reste dans l'ensemble de l' $rootScope.$$listeners alors qu'avec $rootScope.$broadcast l'événement se propage à tous les enfants étendues, dont la plupart seront probablement pas les auditeurs de cet événement, de toute façon. Et bien sûr, lors de la réception du contrôleur de la fin, il suffit d'utiliser $rootScope.$on.

Answer 3

Vous pouvez appeler un service à partir de votre contrôleur qui retourne une promesse et ensuite l'utiliser dans votre contrôleur. Et l'utilisation ultérieure $émettent ou $de diffusion pour informer les autres contrôleurs à ce sujet. Dans mon cas, j'ai dû faire appel http par le biais de mon service, j'ai donc fait quelque chose comme ceci :

function ParentController($scope, testService) {
testService.getList()
.then(function(data){
      $scope.list = testService.list;
      })
.finally(function(){
       $scope.$emit('listFetched');
           })



 function ChildController($scope, testService){
 $scope.$on('listFetched', function(event, data) {
   // use the data accordingly
    })
 }

et mon service ressemble à ceci

app.service('testService',['$http', function($http){

this.list = [];

 this.getList = function () {
    return $http.get(someUrl)
        .then(function (response) {
            if (typeof response.data === 'object') {
                 list = response.data.results;

                return response.data;
            } else {
                // invalid response
                return $q.reject(response.data);
            }

        }, function (response) {
            // something went wrong
            return $q.reject(response.data);
        });

       }


    }])

Answer 4

C'est ma fonction:

$rootScope.$emit('setTitle', newVal.full_name);

$rootScope.$on('setTitle', function(event, title) {
    if (scope.item) 
        scope.item.name = title;
    else 
        scope.item = {name: title};
});