AngularJS => eventi

Parametri

parametri	Tipi di valori
evento	Object {name: "eventName", targetScope: scope, defaultPrevented: false, currentScope: childScope}
args	dati che sono stati passati insieme all'esecuzione di un evento

Usando il sistema di eventi angolari

$ Portata. $ Emettere

Usando $scope.$emit genererà un nome di evento verso l'alto attraverso la gerarchia dell'ambito e notificherà a $scope . Il ciclo di vita dell'evento parte dall'ambito in cui è stato chiamato $emit .

Wireframe funzionante:

$ Portata. $ Trasmissione

Usando $scope.$broadcast genererà un evento in $scope . Possiamo ascoltare questi eventi usando $scope.$on

Wireframe funzionante:

Sintassi:

// firing an event upwards
$scope.$emit('myCustomEvent', 'Data to send');

// firing an event downwards
$scope.$broadcast('myCustomEvent', {
  someProp: 'some value'
});

// listen for the event in the relevant $scope
$scope.$on('myCustomEvent', function (event, data) {
  console.log(data); // 'Data from the event'
});

Invece di $scope puoi usare $rootScope , in tal caso il tuo evento sarà disponibile in tutti i controller indipendentemente dall'ambito di questi controller

Pulisci evento registrato in AngularJS

Il motivo per pulire gli eventi registrati perché anche il controller è stato distrutto, la gestione dell'evento registrato è ancora attiva. Quindi il codice funzionerà come di sicuro inaspettato.

// firing an event upwards
$rootScope.$emit('myEvent', 'Data to send');

// listening an event
var listenerEventHandler = $rootScope.$on('myEvent', function(){
    //handle code
});

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

Usi e significato

Questi eventi possono essere utilizzati per comunicare tra 2 o più controller.

$emit invia un evento verso l'alto attraverso la gerarchia dell'ambito, mentre $broadcast invia un evento verso il basso a tutti gli ambiti figlio. Questo è stato magnificamente spiegato qui .

Ci possono essere fondamentalmente due tipi di scenario durante la comunicazione tra i controller:

Quando i controllori hanno una relazione Parent-Child. (possiamo usare principalmente $scope in tali scenari)

Quando i controllori non sono indipendenti l'uno dall'altro e sono necessari per essere informati sulle reciproche attività. (possiamo usare $rootScope in tali scenari)

es .: per qualsiasi sito di e-commerce, supponiamo di avere ProductListController (che controlla la pagina di elenco dei prodotti quando viene fatto clic su qualsiasi marca di prodotto) e CartController (per gestire gli articoli del carrello). Ora, quando clicchiamo sul pulsante Aggiungi al carrello , deve essere informato anche su CartController , in modo che possa riflettere il conteggio / i dettagli del nuovo articolo carrello nella barra di navigazione del sito. Questo può essere ottenuto usando $rootScope .

Con $scope.$emit

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script>
        var app = angular.module('app', []);

        app.controller("FirstController", function ($scope) {
            $scope.$on('eventName', function (event, args) {
                $scope.message = args.message;
            });
        });

        app.controller("SecondController", function ($scope) {
            $scope.handleClick = function (msg) {
                $scope.$emit('eventName', {message: msg});
            };
        });

    </script>
  </head>
  <body ng-app="app">
    <div ng-controller="FirstController" style="border:2px ;padding:5px;">
        <h1>Parent Controller</h1>
        <p>Emit Message : {{message}}</p>
        <br />
        <div ng-controller="SecondController" style="border:2px;padding:5px;">
            <h1>Child Controller</h1>
            <input ng-model="msg">
            <button ng-click="handleClick(msg);">Emit</button>
        </div>
    </div>
  </body>
</html>

Con $scope.$broadcast :

<html>
  <head>
    <title>Broadcasting</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
    <script>
        var app = angular.module('app', []);

        app.controller("FirstController", function ($scope) {
            $scope.handleClick = function (msg) {
                $scope.$broadcast('eventName', {message: msg});
            };

        });

        app.controller("SecondController", function ($scope) {
            $scope.$on('eventName', function (event, args) {
                $scope.message = args.message;
            });
        });

    </script>
  </head>
  <body ng-app="app">
    <div ng-controller="FirstController" style="border:2px solid ; padding:5px;">
        <h1>Parent Controller</h1>
        <input ng-model="msg">
        <button ng-click="handleClick(msg);">Broadcast</button>
        <br /><br />
        <div ng-controller="SecondController" style="border:2px solid ;padding:5px;">
            <h1>Child Controller</h1>
            <p>Broadcast Message : {{message}}</p>
        </div>
    </div>
  </body>
</html>

Annullare sempre $ rootScope. $ Sugli ascoltatori nell'evento $ destory dell'ambito

$ rootScope. $ sugli ascoltatori rimarrà in memoria se navighi su un altro controller. Ciò creerà una perdita di memoria se il controller non rientra nell'ambito.

non

angular.module('app').controller('badExampleController', badExample);

badExample.$inject = ['$scope', '$rootScope'];
function badExample($scope, $rootScope) {

    $rootScope.$on('post:created', function postCreated(event, data) {});

}

Fare

angular.module('app').controller('goodExampleController', goodExample);

goodExample.$inject = ['$scope', '$rootScope'];
function goodExample($scope, $rootScope) {

    var deregister = $rootScope.$on('post:created', function postCreated(event, data) {});

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

}

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

AngularJS
eventi

Ricerca…