javascript - new - evalasync




Funzionando con $ scope. $ Emit e $ scope. $ On (9)

Come posso inviare il mio oggetto $ scope da un controller a un altro usando $ emit e $ su metodi?

Puoi inviare qualsiasi oggetto desiderato nella gerarchia della tua app, incluso $ scope .

Ecco una rapida idea di come funzionano broadcast ed emit .

Notare i nodi sottostanti; tutto annidato nel nodo 3. Si utilizza broadcast ed emit quando si dispone di questo scenario.

Nota: il numero di ciascun nodo in questo esempio è arbitrario; potrebbe facilmente essere il numero uno; il numero due; o anche il numero 1,348. Ogni numero è solo un identificatore per questo esempio. Il punto di questo esempio è mostrare l'annidamento di controllori / direttive angolari.

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

Dai un'occhiata a questo albero. Come rispondi alle seguenti domande?

Nota: ci sono altri modi per rispondere a queste domande, ma qui discuteremo di trasmissione ed emettere . Inoltre, quando si legge sotto il testo si assume che ogni numero abbia il proprio file (direttiva, controller) ex one.js, two.js, three.js.

In che modo il nodo 1 parla al nodo 3 ?

Nel file one.js

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

Nel file three.js - il nodo più in alto a tutti i nodi figli necessari per comunicare.

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

In che modo il nodo 2 parla al nodo 3?

Nel file two.js

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

Nel file three.js - il nodo più in alto a tutti i nodi figli necessari per comunicare.

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

In che modo il nodo 3 parla al nodo 1 e / o al nodo 2?

Nel file three.js - il nodo più in alto a tutti i nodi figli necessari per comunicare.

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

Nel file one.js && two.js qualunque sia il file che si desidera catturare il messaggio o entrambi.

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

In che modo il nodo 2 parla al nodo 1?

Nel file two.js

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

Nel file three.js - il nodo più in alto a tutti i nodi figli necessari per comunicare.

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

Nel file one.js

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

PERÒ

Quando tutti questi nodi figli annidati cercano di comunicare in questo modo, vedrai rapidamente molti $ on , $ broadcast e $ emit .

Ecco cosa mi piace fare.

Nel PARENT NODE più in alto ( 3 in questo caso ...), che potrebbe essere il controller genitore ...

Quindi, nel file three.js

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

Ora in uno qualsiasi dei nodi figlio è necessario solo $ emettere il messaggio o catturarlo usando $ on .

NOTA: Normalmente è abbastanza facile parlare in un percorso annidato senza usare $ emit , $ broadcast o $ on , il che significa che la maggior parte dei casi d'uso si riferiscono a quando si tenta di ottenere il nodo 1 per comunicare con il nodo 2 o viceversa.

In che modo il nodo 2 parla al nodo 1?

Nel file two.js

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

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

Nel file three.js - il nodo più in alto a tutti i nodi figli necessari per comunicare.

Abbiamo già gestito questo ricordo?

Nel file one.js

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

Avrai comunque bisogno di usare $ on con ogni valore specifico che vuoi catturare, ma ora puoi creare qualsiasi cosa tu voglia in uno qualsiasi dei nodi senza doversi preoccupare di come ottenere il messaggio attraverso il gap del nodo genitore mentre catturiamo e trasmettiamo il generico pushChangesToAllNodes .

Spero che questo ti aiuti...

https://code.i-harness.com

Come posso inviare il mio oggetto $scope da un controller a un altro usando .$emit e .$on metodi?

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

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

Non funziona nel modo in cui penso che dovrebbe. Come funzionano $emit e $on ?


È necessario utilizzare $ rootScope per inviare e acquisire eventi tra i controller nella stessa app. Iniettare la dipendenza $ rootScope dai controller. Ecco un esempio funzionante.

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

Gli eventi collegati all'oggetto $ scope funzionano solo nel controller proprietario. La comunicazione tra i controller avviene tramite $ rootScope o Servizi.


Gli ambiti possono essere utilizzati per propagare, inviare eventi all'ambito figli o genitore.

$ emit - propaga l'evento al genitore. $ broadcast - propaga l'evento ai bambini. $ on - metodo per ascoltare gli eventi, propagati da $ emit e $ broadcast.

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

esempio app.js :

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

Qui puoi testare il codice: http://jsfiddle.net/zp6v0rut/41/


Ho finito per aggiungere una libreria EventEmitter esterna per proiettare come servizio e iniettarla ovunque mi servisse. Così posso "emettere" e "on" qualsiasi cosa senza curare l'ereditarietà dell'ambito. È meno problemi in questo modo e sicuramente prestazioni migliori. Anche più leggibile per me.

Supporto con caratteri jolly: EventEmitter2

Buona prestazione: eventemitter3

Altra alternativa: Drip


La via più facile :

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>

Per inviare $scope object da un controller a un altro, $rootScope.$broadcast e $rootScope.$emit qui come sono più utilizzati.

Caso 1 :

$ RootScope $ trasmissione:. -

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

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

$rootScope listener di $rootScope non viene distrutto automaticamente. Devi distruggerlo usando $destroy . È preferibile usare $scope.$on mentre gli ascoltatori su $scope vengono distrutti automaticamente, cioè non appena $ scope viene distrutto.

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

O,

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

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

Caso 2:

. $ RootScope $ emettono:

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

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

La principale differenza tra $ emit e $ broadcast è che $ rootScope. $ Emette l'evento deve essere ascoltato usando $ rootScope. $ On, perché l'evento emesso non arriva mai attraverso la struttura ad albero. .
Anche in questo caso devi distruggere l'ascoltatore come nel caso di $ broadcast.

Modificare:

Preferisco non usare $rootScope.$broadcast + $scope.$on ma uso $rootScope.$emit+ $rootScope.$on . $rootScope.$broadcast + $scope.$on combo può causare seri problemi di prestazioni. Questo perché l'evento esploderà attraverso tutti gli ambiti.

Modifica 2 :

Il problema affrontato in questa risposta è stato risolto in angular.js versione 1.2.7. $ broadcast ora evita il bubbling sugli ambiti non registrati e viene eseguito con la stessa rapidità di $ emit.


Secondo i documenti di evento angularjs, la fine di ricezione dovrebbe contenere argomenti con una struttura simile

@params

- L'evento {Object} è l'oggetto evento che contiene informazioni sull'evento

- Argomenti {Object} che vengono passati dal callee (si noti che questo può essere solo uno così meglio da inviare sempre in un oggetto dizionario)

$scope.$on('fooEvent', function (event, args) { console.log(args) }); Dal tuo codice

Inoltre, se stai cercando di ottenere informazioni condivise su diversi controller, c'è un altro modo per ottenerlo e questi sono servizi angolari. Dal momento che i servizi sono singleton, le informazioni possono essere memorizzate e scaricate tra i controller. setter funziona in quel servizio, espone queste funzioni, crea variabili globali nel servizio e le usa per memorizzare le informazioni


Sotto codice mostra i due sub-controller da cui gli eventi vengono inviati verso l'alto al controller principale (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/


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






angularjs