AngularJS => Événements

Paramètres

Paramètres	Types de valeurs
un événement	Object {name: "eventName", targetScope: Scope, defaultPrevented: false, currentScope: ChildScope}
args	les données qui ont été transmises avec l'exécution de l'événement

Utiliser un système d'événements angulaires

$ scope. $ emit

Utiliser $scope.$emit déclenchera un nom d'événement vers le haut dans la hiérarchie de la portée et notifiera la $scope .Le cycle de vie de l'événement commence à la portée sur laquelle $emit été appelé.

Fil de fer de travail:

$ scope. $ broadcast

Utiliser $scope.$broadcast déclenchera un événement dans la $scope . Nous pouvons écouter ces événements en utilisant $scope.$on

Fil de fer de travail:

Syntaxe:

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

Au lieu de $scope vous pouvez utiliser $rootScope . Dans ce cas, votre événement sera disponible dans tous les contrôleurs, quelle que soit la portée de ces contrôleurs.

Evénement enregistré propre à AngularJS

La raison de nettoyer les événements enregistrés, car même le contrôleur a été détruit, la gestion des événements enregistrés est toujours d'actualité. Le code fonctionnera donc de manière inattendue.

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

Usages et signification

Ces événements peuvent être utilisés pour communiquer entre 2 ou plusieurs contrôleurs.

$emit distribue un événement vers le haut dans la hiérarchie de la portée, tandis que $broadcast distribue un événement vers le bas dans toutes les portées enfants. Ceci a été magnifiquement expliqué ici .

Il peut exister deux types de scénarios lors de la communication entre contrôleurs:

Lorsque les contrôleurs ont une relation parent-enfant. (nous pouvons principalement utiliser $scope dans de tels scénarios)

Lorsque les contrôleurs ne sont pas indépendants les uns des autres et doivent être informés de l’activité de chacun. (nous pouvons utiliser $rootScope dans de tels scénarios)

Par exemple: pour tout site de commerce électronique, supposons que nous ayons ProductListController (qui contrôle la page de liste des produits lorsque l'utilisateur clique sur une marque) et CartController (pour gérer les éléments du panier). Maintenant, lorsque nous cliquons sur le bouton Ajouter au panier , celui-ci doit également être informé par CartController , afin qu'il puisse refléter le nombre / les détails des nouveaux éléments du panier dans la barre de navigation du site Web. Cela peut être réalisé en utilisant $rootScope .

Avec $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>

Avec $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>

Toujours désinscrire $ rootScope. $ Sur les écouteurs de l'événement scope $ destory

$ rootScope. $ sur les écouteurs restera en mémoire si vous naviguez vers un autre contrôleur. Cela créera une fuite de mémoire si le contrôleur est hors de portée.

Ne pas

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

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

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

}

Faire

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

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

AngularJS
Événements

Recherche…