AngularJS => evenemang

parametrar

parametrar	Värdenstyper
händelse	Objekt {name: "eventName", targetScope: Scope, defaultPrevented: false, currentScope: ChildScope}
args	data som har skickats tillsammans med genomförandet av händelser

Använda vinkelhändelsessystem

$ Omfattning. $ Emit

Använda $scope.$emit kommer att avfyra ett händelsens namn uppåt genom omfångshierarkin och meddela $scope . Händelsens livscykel startar vid den omfattning som $emit anropades till.

Arbets wireframe:

$ Omfattning. $ Broadcast

Användning av $scope.$broadcast avfyrar en händelse ner $scope . Vi kan lyssna på dessa händelser med $scope.$on

Arbets wireframe:

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

Istället för $scope du använda $rootScope , i så fall kommer ditt evenemang att finnas tillgängligt i alla kontrollerare oavsett kontrollerens omfattning

Ren registrerad händelse i AngularJS

Anledningen till att rensa de registrerade händelserna eftersom även kontrollen har förstörts är hanteringen av registrerade händelser fortfarande vid liv. Så koden kommer att fungera som oväntat med säkerhet.

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

Användningar och betydelse

Dessa händelser kan användas för att kommunicera mellan två eller flera kontroller.

$emit skickar en händelse uppåt genom omfattningshierarkin, medan $broadcast skickar en händelse nedåt till alla barnomfattningar. Detta har förklarats vackert här .

Det kan i princip finnas två typer av scenarier när man kommunicerar mellan kontrollörer:

När kontrollörer har förälder-barn-relation. (vi kan mest använda $scope i sådana scenarier)

När kontrollörer inte är oberoende av varandra och behövs för att informeras om varandras aktivitet. (vi kan använda $rootScope i sådana scenarier)

t ex: För varje e-handelswebbplats, anta att vi har ProductListController (som kontrollerar produktlistans sida när du klickar på ett produktmärke) och CartController (för att hantera vagnar). När vi nu klickar på knappen Lägg till i kundvagn måste den också informeras till CartController så att den kan spegla nytt antal vagnar / detaljer i navigeringsfältet på webbplatsen. Detta kan uppnås med $rootScope .

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

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

Avregistrera alltid $ rootScope. $ På lyssnare på omfanget $ destory-händelse

$ rootScope. $ på lyssnare kommer att finnas kvar i minnet om du navigerar till en annan controller. Detta skapar en minnesläcka om styrenheten faller utanför räckvidden.

inte

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

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

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

}

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

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

AngularJS
evenemang

Sök…