AngularJS => Veranstaltungen

Parameter

Parameter	Werttypen
Veranstaltung	Objekt {name: "eventName", targetScope: Scope, defaultPrevented: false, currentScope: ChildScope}
args	Daten, die zusammen mit der Ereignisausführung übergeben wurden

Verwenden eines Winkelereignissystems

$ scope. $ emit

Die Verwendung von $scope.$emit löst einen Ereignisnamen durch die Gültigkeitsbereichshierarchie nach oben aus und informiert den $scope Der Ereignislebenszyklus beginnt in dem Bereich, in dem $emit aufgerufen wurde.

Wireframe arbeiten:

$ scope. $ broadcast

Mit $scope.$broadcast wird ein Ereignis im $scope . Wir können diese Ereignisse mit $scope.$on

Wireframe arbeiten:

Syntax :

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

Anstelle von $scope Sie $rootScope . In diesem Fall ist Ihr Ereignis in allen Controllern verfügbar, unabhängig von diesem Controller-Bereich

Saubere registrierte Veranstaltung in AngularJS

Der Grund für das Bereinigen der registrierten Ereignisse, da selbst der Controller die Verarbeitung registrierter Ereignisse zerstört hat, ist immer noch am Leben. Der Code wird also als unerwartet ausgeführt.

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

Verwendung und Bedeutung

Diese Ereignisse können verwendet werden, um zwischen zwei oder mehr Controllern zu kommunizieren.

$emit ein Ereignis Versendungen nach oben durch den Umfang Hierarchie, während $broadcast ein Ereignis nach unten auf alle Kind entsendet scopes.This schön erklärt wurde hier .

Bei der Kommunikation zwischen Steuerungen können grundsätzlich zwei Arten von Szenarien verwendet werden:

Wenn Controller eine Eltern-Kind-Beziehung haben. (In solchen Szenarien können wir meistens $scope verwenden.)

Wenn Controller nicht unabhängig voneinander sind und über die Aktivitäten des anderen informiert werden müssen. (In solchen Szenarien können wir $rootScope verwenden.)

Beispiel: Für jede E-Commerce-Website haben wir ProductListController (die die Produktlistenseite kontrolliert, wenn auf eine Produktmarke geklickt wird) und CartController (zum Verwalten von CartController ). Wenn wir nun auf die Schaltfläche "In den Warenkorb" klicken, muss dies ebenfalls CartController mitgeteilt werden, damit die Anzahl / Details der neuen Artikel in der Navigationsleiste der Website CartController können. Dies kann mit $rootScope erreicht werden.

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

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

Entfernen Sie $ rootScope. $ Immer auf Listener des scope $ destory -Ereignisses

$ rootScope. $ on Listener bleibt im Speicher, wenn Sie zu einem anderen Controller navigieren. Dies führt zu einem Speicherverlust, wenn der Controller außerhalb des gültigen Bereichs liegt.

Nicht

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

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

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

}

Tun

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

Lizenziert unter CC BY-SA 3.0

Nicht angeschlossen an Stack Overflow

AngularJS
Veranstaltungen

Suche…