AngularJS => イベント

パラメーター

パラメーター	値の型
イベント	オブジェクト{name： "eventName"、targetScope：Scope、defaultPrevented：false、currentScope：ChildScope}
args	イベント実行とともに渡されたデータ

角度イベントシステムを使用する

$ scope。$ emit

$scope.$emitを使用$scope.$emitと、スコープ階層を介してイベント名が上に向かって発生し、 $scope通知されます。イベントライフサイクルは、 $emitが呼び出されたスコープから開始します。

ワーキングワイヤー：

$ scope。$ broadcast

$scope.$broadcastを使用すると$scope.$broadcastのイベントが発生し$scope 。 $scope.$onを使ってこれらのイベントを聴くことができ$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代わりに$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();
});

用途と意義

これらのイベントは、2つ以上のコントローラ間の通信に使用できます。

$emitはスコープ階層を上にイベント$emitディスパッチし、 $broadcast broadcastはすべての子スコープにイベントをディスパッチします。これはここできれいに説明されています。

コントローラ間で通信する際には、基本的に2つのタイプのシナリオがあります。

コントローラーに親子関係がある場合。（このようなシナリオでは、ほとんどの場合$scopeを使用できます）

コントローラーが互いに独立しておらず、お互いの活動についての情報が必要な場合。（このようなシナリオでは$rootScopeを使用できます）

例：任意のeコマースのWebサイトで、商品ブランドをクリックすると商品リストページを管理するProductListControllerとカートアイテムを管理するCartControllerがあるとします。今度はカートに追加ボタンをクリックすると、ウェブサイトのナビゲーションバーに新しいカートアイテム数/詳細を反映できるようにCartControllerにも通知するCartControllerがあります。これは$rootScopeを使って実現できます。

$scope.$emit使って$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使って$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>

スコープ$ destoryイベントのリスナーでは常に$ rootScope。$を登録解除してください

リスナーの$ 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
イベント

サーチ…