技術

【AngularJS】 $on, $emit, $broadcast

投稿日:2015年7月13日 更新日:

どうも、なかたです。

AngularJSのコントローラー(スコープ)間のデータやりとりで使われる、
「$on」、「$emit」、「$broadcast」
今回はこれらについてまとめてみた。

$on

イベント監視を行う
指定のイベントが発生した際に実行されるリスナーを登録できる

scope.$on('eventname', function(event, args) {
...
});

$emit

自分を含む上方向(親方向)へのイベント通知
イベントと一緒にデータも渡すことができる

scope.$emit('eventname', args);

$broadcast

自分を含む下方向(子方向)へのイベント通知
イベントと一緒にデータも渡..(ry

scope.$broadcast('eventname', args);

そもそも親子ってなんなのよ?

コントローラーが入れ子になっている場合、AngularJSは
外側のコントローラーを親、内側を子としてみる

<div ng-controller="Ctrl1">
<a href="#" ng-click="click()">click1</a>
</div>
<div ng-controller="Ctrl2">
<a href="#" ng-click="click()">click2</a>
</div>
<div ng-controller="Ctrl1">
<a href="#" ng-click="click()">click1</a>
<div ng-controller="Ctrl2">
<a href="#" ng-click="click()">click2</a>
</div>
</div>

Ctrl2がCtrl1の内側に入ってますね。
これで親子関係となります。

実際に動かしてみよう

<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.4/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="Ctrl1">
<a href="#" ng-click="click()">click1</a>
<div ng-controller="Ctrl2">
<a href="#" ng-click="click()">click2</a>
</div>
</div>
</body>
</html>
angular.module("app", [])
.controller("Ctrl1", function($scope) {
$scope.$on("event:test", function(event, args) {
console.log("controller1", args);
});
$scope.click = function() {
$scope.$emit("event:test", "data1");
};
})
.controller("Ctrl2", function($scope) {
$scope.$on("event:test", function(event, args) {
console.log("controller2", args);
});
$scope.click = function() {
$scope.$emit("event:test", "data2");
};
});

結果を見てみよう

$emitになってるので、
– click1を押下 → “controller1 data1” がログに出力される
– click2を押下 → “controller1 data2” と “controller2 data2” がログに出力される

たしかに”自分を含む上方向(親方向)へのイベント通知”されてるのがわかります。
$emitを$broadcastに変更すると動きが逆になるはずです。

感謝サイト

http://kinjouj.github.io/2014/04/angularjs-17-broadcast.html
http://kinjouj.github.io/2014/04/angularjs-18-emit.html

-技術
-

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This site uses Akismet to reduce spam. Learn how your comment data is processed.

関連記事

[Rails] バージョン上げるときに気をつけること

どうも中田です。 セキュリティ診断とかで引っかかってrailsのバージョンあげた …

no image

【ionic】view-titleが更新できない!!

どうも中田です。 ionicのview-titleを動的に変えるってパターンはし …

[Xcode] iOSソフトウェアアップデート後に、Could not locate device support files.

こんにちは。たなかです。 Xcodeで開発中に以下のエラーにぶつかりました。 エ …

[AWS Cli] brew install awscli が失敗!

どうも中田です awsコマンドがないよーって言われたので、再度インストールするこ …

no image

【ionic 1.2】Native Scrolling

どうも中田です。 2015/12/10にionicの1.2が出ました! http …