技術

【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

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

nginxにX-Robots-Tagを設定する

こんにちは 検索結果にページが表示されないようにするために metaタグには & …

no image

CSSのbackgroundで複数の背景色を設定してみる

こんにちは 仕事で複数の背景色を設定する機会がありましたので 今回はそのやり方を …

no image

[Angular]APIから画像を取得して表示する

こんばんは アプリケーションを作っていてフロント側で画像を出すときって ストレー …

[Angular] has no exported member ‘XXXLoginComponent’.

どうも中田です Angularでコンポーネント名を階層構造にあった名前にしようと …

no image

【ionic】タブをタップで最上部にスクロール!

どうも、中田です。 今日はタブをタップでトップにゴーの日です。 どういう日かとい …