技術

【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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

rails_logo

[Rails] image_tagを使わずにassets内の画像を指定する方法

こんにちは。さとうです。 今回はimage_tagを使わずにassets内の画像 …

no image

heroku + node.jsでError R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

こんにちは heroku + node.jsでアプリを作っていて、いざherok …

no image

OSSに貢献してみたい人向けチュートリアルの紹介

こんばんは githubのtrendingを眺めてたら、OSSに貢献してみたい人 …

no image

【Rails】deviseを日本語化する

こんばんは railsでログイン機能を作る時にdeviseを使う方は多いのではな …

no image

hamlをerbに変換する

こんばんは railsの色々な記事を見ていると、hamlで書かれているものも結構 …