技術

【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.

関連記事

【AWS】VMWareからAWSへサーバ移設

どうも中田です。 今回はVMWareからAWSへのマイグレーションに関するお話。 …

no image

CSSのpositionで要素を真ん中寄せにする(JS不要)

positionを使って要素を真ん中寄せにする時は、transform: tra …

no image

HTMLタグだけでアコーディオンを実装する

こんにちは htmlタグのdetailsというのは知っていますか? 僕も初めて知 …

no image

rubyでシンボリックリンクを作成する

rubyでシンボリックリンクを作る機会がありました。 どちらも、srcへのシンボ …

[Rails] TinyTds::Error (closed connection)

どうも中田です。 たぶん、この記事で救われるエンジニアの方はおそらく1人いればよ …