angular.jsをやってみる (18) - $emit -

前回のangular.jsをやってみる (17) – $broadcast -の続き。$broadcastと$emitを同時に書くとごちゃごちゃになる気がしたので分けた次

で前回で$broadcastはそれを実行したスコープから下への子孫内スコープのイベントをfireするっていう形だったのですが、$emitはその逆というか自身のスコープから親のスコープへのイベントをfireするっていう事な模様

という事でやってみた

index.html

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <script src="jquery.js"></script>
    <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="Controller1">
      <a href="#" ng-click="click()">click1</a>
      <div ng-controller="Controller2">
        <a href="#" ng-click="click()">click2</a>
      </div>
    </div>
  </body>
</html>

前回と変わらないので

app.js

angular.module("app", [])
  .controller("Controller1", function($scope) {
    $scope.$on("a", function(event, args) {
      console.log("c1");
    });

    $scope.click = function() {
      console.log("click1");
      $scope.$emit("a", "A");
    };
  })
  .controller("Controller2", function($scope) {
    $scope.$on("a", function(event, args) {
      console.log("c2");
    });

    $scope.click = function() {
      console.log("click2");
      $scope.$emit("a", "A");
    };
  });

まぁ$broadcastを$emitに変えただけ。で前回の$broadcastだとController2から発生するclickメソッドで$broadcastしてもController1の方へは行かない。それは前回も書いた通り、$broadcastは子孫内イベントをfireするのでController1がController2の子孫では無いのでイベントを定義してもfireされない

で$emitの場合にはController2がController1の子孫である場合にそれを実行したスコープから親へのスコープへのイベントをfireするのでController1で定義したイベントをController2側によって$emitされた場合Controller1のイベントもfireされる。逆にController1から$emitしてもController2側で定義したイベントはfireされない

まぁ合ってるかは定かじゃないけど

$broadcastは自身のスコープから下層の方へのイベントをfireする
$emitは自身のスコープから上層の方へのイベントをfireする

っていう事なんかなと。