AngularJS => Evenementen

parameters

parameters	Waarden typen
evenement	Object {name: "eventName", targetScope: Scope, defaultPrevented: false, currentScope: ChildScope}
args	gegevens die zijn doorgegeven bij het uitvoeren van gebeurtenissen

Gebruik hoekig gebeurtenissysteem

$ Scope. $ Emit

Met $scope.$emit zal een gebeurtenisnaam naar boven worden geactiveerd door de scopehiërarchie en de $scope melden. De eventlevenscyclus begint bij de scope waarop $emit werd aangeroepen.

Werken draadframe:

$ Scope. $ Uitzending

Met $scope.$broadcast wordt een evenement geactiveerd van de $scope . We kunnen van deze gebeurtenissen luisteren met $scope.$on

Werken draadframe:

Syntaxis:

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

In plaats van $scope kunt u $rootScope , in dat geval zal uw evenement beschikbaar zijn in alle controllers, ongeacht het bereik van die controllers

Schoon geregistreerde gebeurtenis in AngularJS

De reden om de geregistreerde gebeurtenissen op te schonen omdat zelfs de controller is vernietigd, de behandeling van geregistreerde gebeurtenissen leeft nog. Dus de code zal zeker onverwacht worden uitgevoerd.

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

Gebruik en betekenis

Deze gebeurtenissen kunnen worden gebruikt om te communiceren tussen 2 of meer controllers.

$emit verzendt een gebeurtenis naar boven via de scope-hiërarchie, terwijl $broadcast een gebeurtenis naar beneden verzendt naar alle kindbereiken. Dit is hier prachtig uitgelegd.

Er kunnen in principe twee soorten scenario's zijn tijdens communicatie tussen controllers:

Wanneer controllers een ouder-kindrelatie hebben. (we kunnen meestal $scope in dergelijke scenario's)

Wanneer controllers niet onafhankelijk van elkaar zijn en op de hoogte moeten worden gehouden van elkaars activiteiten. (we kunnen $rootScope in dergelijke scenario's gebruiken)

bijvoorbeeld: stel voor elke e-commerce website dat we ProductListController (die de productvermeldingspagina beheert wanneer op een productmerk wordt geklikt) en CartController (om winkelwagenitems te beheren). Wanneer we nu op de knop Toevoegen aan winkelwagen klikken, moet dit ook aan CartController worden gemeld, zodat het aantal nieuwe items in de winkelwagen / details in de navigatiebalk van de website kan worden weergegeven. Dit kan worden bereikt met $rootScope .

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

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

Registreer $ rootScope. $ Altijd op luisteraars bij de scope $ destory-gebeurtenis

$ rootScope. $ op luisteraars blijft in het geheugen als u naar een andere controller navigeert. Dit veroorzaakt een geheugenlek als de controller buiten bereik valt.

doe niet

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

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

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

}

Doen

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

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

AngularJS
Evenementen

Zoeken…