AngularJS => События

параметры

параметры	Типы значений
событие	Object {name: "eventName", targetScope: Scope, defaultPrevented: false, currentScope: ChildScope}
арг	данные, которые были переданы вместе с выполнением события

Использование системы угловых событий

$ Объем. $ Испускают

Используя $scope.$emit загонит имя события вверх по иерархии областей и уведомит об этом в области $scope . Жизненный цикл события начинается с области, в которой был вызван $emit .

Рабочий каркас:

$ Объем. $ Широковещательный

Использование $scope.$broadcast приведет к сбою события в $scope . Мы можем слушать эти события, используя $scope.$on

Рабочий каркас:

Синтаксис:

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

Вместо $scope вы можете использовать $rootScope , в этом случае ваше событие будет доступно во всех контроллерах вне зависимости от области контроля

Чистое зарегистрированное событие в AngularJS

Причина очистки зарегистрированных событий, потому что даже контроллер был уничтожен, обработка зарегистрированного события все еще жива. Таким образом, код будет работать как неожиданно.

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

Использование и значение

Эти события могут использоваться для связи между двумя или более контроллерами.

$emit отправляет событие вверх по иерархии областей, а $broadcast отправляет событие вниз всем дочерним областям. Это было прекрасно объяснено здесь .

Взаимодействие между контроллерами может быть в основном двух типов:

Когда контроллеры имеют отношения «Родитель-ребенок». (мы можем в основном использовать $scope в таких сценариях)

Когда контроллеры не независимы друг от друга и необходимы для информирования о деятельности друг друга. (мы можем использовать $rootScope в таких сценариях)

например: для любого веб-сайта электронной коммерции предположим, что у нас есть ProductListController (который контролирует страницу с листингом продукта при нажатии на любую марку) и CartController (для управления элементами корзины). Теперь, когда мы нажимаем кнопку « Добавить в корзину» , она также должна быть CartController в CartController , так что она может отражать количество / количество элементов корзины в навигационной панели сайта. Этого можно добиться с помощью $rootScope .

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

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

Всегда отменить регистрацию $ rootScope. $ На слушателях в области $ destory event

$ rootScope. $ на слушателях останется в памяти, если вы перейдете к другому контроллеру. Это приведет к утечке памяти, если контроллер выпадет из области видимости.

не

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

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

AngularJS
События

Поиск…