Trabajando con $ scope. $ Emit y $ scope. $ On

¿Cómo puedo enviar mi $scopeobjeto de un controlador a otro usando .$emity .$onmétodos?

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

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

No funciona como creo que debería. ¿Cómo hacer $emity $ontrabajar?

En primer lugar, la relación de alcance padre-hijo sí importa. Tienes dos posibilidades para emitir algún evento:

• $broadcast - envía el evento hacia abajo a todos los ámbitos secundarios,
• $emit - despacha el evento hacia arriba a través de la jerarquía de alcance.

No sé nada sobre la relación de sus controladores (ámbitos), pero hay varias opciones:

1. Si el alcance de firstCtrles padre del secondCtrlalcance, su código debería funcionar reemplazando $emitpor $broadcasten firstCtrl:

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

2. En caso de que no haya una relación padre-hijo entre sus ámbitos, puede inyectar $rootScopeen el controlador y transmitir el evento a todos los ámbitos secundarios (es decir, también secondCtrl).

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

3. Finalmente, cuando necesite enviar el evento desde el controlador secundario a ámbitos hacia arriba, puede usarlo $scope.$emit. Si el alcance de firstCtrles padre del secondCtrlalcance:

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

Además, sugeriría una cuarta opción como una mejor alternativa a las opciones propuestas por @zbynour.

Use en $rootScope.$emitlugar de $rootScope.$broadcastindependientemente de la relación entre la transmisión y el controlador de recepción. De esa manera, el evento permanece dentro del conjunto de $rootScope.$$listenersmientras que con $rootScope.$broadcastel evento se propaga a todos los ámbitos secundarios, la mayoría de los cuales probablemente no serán oyentes de ese evento de todos modos. Y, por supuesto, al final del controlador receptor solo se usa $rootScope.$on.

Para esta opción, debe recordar destruir los oyentes rootScope del controlador:

var unbindEventHandler = $rootScope.$on('myEvent', myHandler);
$scope.$on('$destroy', function () {
  unbindEventHandler();
});

¿Cómo puedo enviar mi objeto $ scope de un controlador a otro usando los métodos. $ Emit y. $ On?

Puede enviar cualquier objeto que desee dentro de la jerarquía de su aplicación, incluido $ scope .

He aquí una idea rápida de cómo difusión y emiten trabajo.

Observe los nodos a continuación; todos anidados dentro del nodo 3. Usas broadcast y emites cuando tienes este escenario.

Nota: El número de cada nodo en este ejemplo es arbitrario; fácilmente podría ser el número uno; el numero dos; o incluso el número 1,348. Cada número es solo un identificador para este ejemplo. El objetivo de este ejemplo es mostrar el anidamiento de controladores / directivas angulares.

                 3
           ------------
           |          |
         -----     ------
         1   |     2    |
      ---   ---   ---  ---
      | |   | |   | |  | |

Mira este árbol ¿Cómo responde las siguientes preguntas?

Nota: Hay otras maneras de responder a estas preguntas, pero aquí vamos a discutir emisión y emiten . Además, cuando lea el texto a continuación, suponga que cada número tiene su propio archivo (directiva, controlador) ex one.js, two.js, three.js.

¿Cómo habla el nodo 1 al nodo 3 ?

En el archivo one.js

scope.$emit('messageOne', someValue(s));

En el archivo three.js : el nodo superior para todos los nodos secundarios necesarios para comunicarse.

scope.$on('messageOne', someValue(s));

¿Cómo habla el nodo 2 al nodo 3?

En el archivo two.js

scope.$emit('messageTwo', someValue(s));

En el archivo three.js : el nodo superior para todos los nodos secundarios necesarios para comunicarse.

scope.$on('messageTwo', someValue(s));

¿Cómo habla el nodo 3 al nodo 1 y / o al nodo 2?

En el archivo three.js : el nodo superior para todos los nodos secundarios necesarios para comunicarse.

scope.$broadcast('messageThree', someValue(s));

En el archivo one.js && two.js, el archivo que desee capturar el mensaje o ambos.

scope.$on('messageThree', someValue(s));

¿Cómo habla el nodo 2 al nodo 1?

En el archivo two.js

scope.$emit('messageTwo', someValue(s));

En el archivo three.js : el nodo superior para todos los nodos secundarios necesarios para comunicarse.

scope.$on('messageTwo', function( event, data ){
  scope.$broadcast( 'messageTwo', data );
});

En el archivo one.js

scope.$on('messageTwo', someValue(s));

SIN EMBARGO

Cuando tenga todos estos nodos hijos anidados que intentan comunicarse de esta manera, verá rápidamente muchos $ on , $ broadcast's y $ emit's .

Esto es lo que me gusta hacer.

En el NODO DE PADRES superior ( 3 en este caso ...), que puede ser su controlador principal ...

Entonces, en el archivo three.js

scope.$on('pushChangesToAllNodes', function( event, message ){
  scope.$broadcast( message.name, message.data );
});

Ahora en cualquiera de los nodos secundarios solo necesita $ emitir el mensaje o atraparlo usando $ on .

NOTA: Normalmente es bastante fácil cruzar la conversación en una ruta anidada sin usar $ emit , $ broadcast o $ on , lo que significa que la mayoría de los casos de uso son cuando intenta que el nodo 1 se comunique con el nodo 2 o viceversa.

¿Cómo habla el nodo 2 al nodo 1?

En el archivo two.js

scope.$emit('pushChangesToAllNodes', sendNewChanges());

function sendNewChanges(){ // for some event.
  return { name: 'talkToOne', data: [1,2,3] };
}

En el archivo three.js : el nodo superior para todos los nodos secundarios necesarios para comunicarse.

Ya manejamos este, ¿recuerdas?

En el archivo one.js

scope.$on('talkToOne', function( event, arrayOfNumbers ){
  arrayOfNumbers.forEach(function(number){
    console.log(number);
  });
});

Aún necesitará usar $ on con cada valor específico que desee capturar, pero ahora puede crear lo que quiera en cualquiera de los nodos sin tener que preocuparse por cómo transmitir el mensaje a través del espacio del nodo principal a medida que capturamos y transmitimos el genérico pushChangesToAllNodes .

Espero que esto ayude...

Para enviar $scope objectde un controlador a otro, hablaré sobre $rootScope.$broadcasty $rootScope.$emitaquí, ya que se usan más.

Caso 1 :

$ rootScope. $ broadcast: -

$rootScope.$broadcast('myEvent',$scope.data);//Here `myEvent` is event name

$rootScope.$on('myEvent', function(event, data) {} //listener on `myEvent` event

$rootScopeEl oyente no se destruye automáticamente. Necesitas destruirlo usando $destroy. Es mejor usarlo $scope.$onya que los oyentes $scopese destruyen automáticamente, es decir, tan pronto como se destruye $ scope.

$scope.$on('myEvent', function(event, data) {}

O,

  var customeEventListener = $rootScope.$on('myEvent', function(event, data) {

  }
  $scope.$on('$destroy', function() {
        customeEventListener();
  });

Caso 2:

$ rootScope. $ emit:

   $rootScope.$emit('myEvent',$scope.data);

   $rootScope.$on('myEvent', function(event, data) {}//$scope.$on not works

La principal diferencia en $ emit y $ broadcast es que el evento $ rootScope. $ Emit debe escucharse usando $ rootScope. $ On, porque el evento emitido nunca desciende por el árbol de alcance. .
En este caso también debes destruir al oyente como en el caso de $ broadcast.

Editar:

Prefiero no usar $rootScope.$broadcast + $scope.$onsino usar $rootScope.$emit+ $rootScope.$on. El $rootScope.$broadcast + $scope.$oncombo puede causar serios problemas de rendimiento. Esto se debe a que el evento burbujeará en todos los ámbitos.

Edición 2 :

El problema abordado en esta respuesta se ha resuelto en angular.js versión 1.2.7. $ broadcast ahora evita burbujear sobre ámbitos no registrados y se ejecuta tan rápido como $ emit.

Debe usar $ rootScope para enviar y capturar eventos entre controladores en la misma aplicación. Inyecte la dependencia de $ rootScope a sus controladores. Aquí hay un ejemplo de trabajo.

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

app.controller('secondCtrl', function($scope, $rootScope) {
        function secondCtrl($scope)
        {
            $rootScope.$on('someEvent', function(event, data) { console.log(data); });
        }
}

Los eventos vinculados al objeto $ scope solo funcionan en el controlador propietario. La comunicación entre los controladores se realiza a través de $ rootScope o Services.

Puede llamar a un servicio desde su controlador que le devuelve una promesa y luego usarlo en su controlador. Y más uso $emito $broadcastpara informar a otros controladores al respecto. En mi caso, tuve que hacer llamadas http a través de mi servicio, así que hice algo como esto:

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

y mi servicio se ve así

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

        }

    }])

Esta es mi función:

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

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

<!DOCTYPE html>
<html>

<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module('MyApp',[]);
app.controller('parentCtrl',function($scope){
  $scope.$on('MyEvent',function(event,data){    
    $scope.myData = data;
  });
 });

app.controller('childCtrl',function($scope){
  $scope.fireEvent = function(){ 
  $scope.$emit('MyEvent','Any Data');
  }  
 });
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="parentCtrl" ng-model="myName">

{{myData}}

 <div ng-controller="childCtrl">
   <button ng-click="fireEvent()">Fire Event</button>
 </div>

</div>
</body>
</html>

El (los) alcance (s) se pueden usar para propagar, enviar eventos al ámbito secundario o primario.

$ emit : propaga el evento a padre. $ broadcast : propaga el evento a los niños. $ en : método para escuchar los eventos, propagado por $ emit y $ broadcast.

ejemplo index.html :

<div ng-app="appExample" ng-controller="EventCtrl">
      Root(Parent) scope count: {{count}}
  <div>
      <button ng-click="$emit('MyEvent')">$emit('MyEvent')</button>
      <button ng-click="$broadcast('MyEvent')">$broadcast('MyEvent')</button><br>

      Childrent scope count: {{count}} 
  </div>
</div>

ejemplo app.js :

angular.module('appExample', [])
.controller('EventCtrl', ['$scope', function($scope) {
  $scope.count = 0;
  $scope.$on('MyEvent', function() {
    $scope.count++;
  });
}]);

Aquí puede probar el código: http://jsfiddle.net/zp6v0rut/41/

El siguiente código muestra los dos subcontroladores desde donde los eventos se envían hacia arriba al controlador principal (rootScope)

<body ng-app="App">

    <div ng-controller="parentCtrl">

        <p>City : {{city}} </p>
        <p> Address : {{address}} </p>

        <div ng-controller="subCtrlOne">
            <input type="text" ng-model="city" />
            <button ng-click="getCity(city)">City !!!</button>
        </div>

        <div ng-controller="subCtrlTwo">

            <input type="text" ng-model="address" />
            <button ng-click="getAddrress(address)">Address !!!</button>

        </div>

    </div>

</body>

var App = angular.module('App', []);

// parent controller
App.controller('parentCtrl', parentCtrl);

parentCtrl.$inject = ["$scope"];

function parentCtrl($scope) {

    $scope.$on('cityBoom', function(events, data) {
        $scope.city = data;
    });

    $scope.$on('addrBoom', function(events, data) {
        $scope.address = data;
    });
}

// sub controller one

App.controller('subCtrlOne', subCtrlOne);

subCtrlOne.$inject = ['$scope'];

function subCtrlOne($scope) {

    $scope.getCity = function(city) {

        $scope.$emit('cityBoom', city);    
    }
}

// sub controller two

App.controller('subCtrlTwo', subCtrlTwo);

subCtrlTwo.$inject = ["$scope"];

function subCtrlTwo($scope) {

    $scope.getAddrress = function(addr) {

        $scope.$emit('addrBoom', addr);   
    }
}

http://jsfiddle.net/shushanthp/zp6v0rut/

De acuerdo con los documentos del evento angularjs, el extremo receptor debería contener argumentos con una estructura como

@params

- El evento {Object} es el objeto del evento que contiene información sobre el evento

- Argumentos {Objeto} que pasa la persona que llama (Tenga en cuenta que esto solo puede ser uno mejor para enviar siempre un objeto de diccionario)

$scope.$on('fooEvent', function (event, args) { console.log(args) }); De su código

Además, si está tratando de obtener una información compartida para que esté disponible en diferentes controladores, hay otra forma de lograrlo y son los servicios angulares. Dado que los servicios son únicos, la información se puede almacenar y buscar en los controladores. Simplemente cree getter y establece funciones en ese servicio, expone estas funciones, crea variables globales en el servicio y las usa para almacenar la información

La forma más fácil :

HTML

  <div ng-app="myApp" ng-controller="myCtrl"> 

        <button ng-click="sendData();"> Send Data </button>

    </div>

JavaScript

    <script>
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function($scope, $rootScope) {
            function sendData($scope) {
                var arrayData = ['sam','rumona','cubby'];
                $rootScope.$emit('someEvent', arrayData);
            }

        });
        app.controller('yourCtrl', function($scope, $rootScope) {
            $rootScope.$on('someEvent', function(event, data) {
                console.log(data); 
            }); 
        });
    </script>