$ scope。$ emit不起作用，而$ rootScope。$ broadcast起作用

Question

這是我的家長控制器，我可以在其中收聽活動

app.controller("SectionLayoutController", function($scope) {

  $scope.$on("sectionLayout.doAction", function(e, options) {
    // do some stuff
  });

});

然后在我的孩子控制器中

$scope.$emit("sectionLayout.doAction", { someOption: "something" });

該事件應在父控制器中觸發，但不是。 我確實在發出事件之前檢查了我的子控制器作用域的內容（使用console.log），並且該事件的偵聽器確實存在於其父項之一中。

也許是因為子控制器的作用域不是監聽事件的作用域的直接子對象？ 這並不是真正的關鍵問題，因為我可以用

$rootScope.$broadcast("sectionLayout.doAction", { someOption: "something" });

它可以正常工作，但是我仍然對為什么$ scope。$ emit不起作用（它確實起作用了，只是隨機停止了）感到好奇。

（角度版本1.2.16）

Answer 1

編輯

問題似乎是angular.js中的錯誤，而不是ui-router（已經被報告，並計划在1.3版中進行修復， 網址為https://github.com/angular/angular.js/issues/5489 ）。 在指令內部使用ng-transclude似乎為指令創建了同級作用域，從而形成了這種層次結構（以我的第一個plunker示例為例）： http ://i.imgur.com/4OUxJSP.png。

是的，我想現在我將使用$ rootScope。$ broadcast

---

好的，所以從我發現的結果來看，這是ui-router的一個錯誤（哎呀，別忘了我在使用它）。

如果子路由的ui視圖位於已包含的偽指令內，則事件將卡在那里。 這是一個正在使用的錯誤的龐然大物http://plnkr.co/edit/zgqAPiDbB2LUtwJaeHhN?p=preview 。 Dummy控制器使用sectionLayout指令，並且ui-view被覆蓋（如在dummy.html中看到的）。

<!-- dummy.html -->
<div section-layout="layout">
  <!-- transcluded stuff -->
  <div ui-view></div>
</div>

<!-- sectionlayout.html -->
<div>
  <p>Section Layout for {{layout.title}}</p>
  <p ng-repeat="r in recieves">{{r.message}}</p>

  <div ng-transclude style="background-color: #EEE;"></div>
</div>

---

這是$ scope。$ emit起作用的另一個plunkr，唯一的區別是ui視圖直接在sectionlayout.html內部，而不是在指令http://plnkr.co/edit/mVftwkZrynkF6KanE4zV?p=preview中包含。

<!-- dummy.html -->
<div section-layout="layout"></div>

<!-- sectionlayout.html -->
<div>
  <p>Section Layout for {{layout.title}}</p>
  <p ng-repeat="r in recieves">{{r.message}}</p>

  <div ui-view style="background-color: #EEE;"></div>
</div>

---

這是一個完全不同的plunkr，在這里我不使用ui-router，但還是一樣。 指令用於監聽事件的父級，而子控制器則包含在該指令中。 在此腳本中，$ scope。$ emit和$ rootScope。$ broadcast都可以正常工作，因此在ui-router中嵌入了ui-views似乎是一個錯誤。 http://plnkr.co/edit/Iz5YcbMiTzrXQ6bJMskK?p=preview

<div ng-controller="ParentController">
  <p>Parent Controller</p>
  <p ng-repeat="r in recieves">{{r.message}}</p>

  <div my-directive>
    <div ng-controller="ChildController" style="background-color: #EEE;">
      <p>Child Controller</p>
      <button ng-click="tryEmit()">$scope.$emit</button>
      <button ng-click="tryBroadcast()">$rootScope.$broadcast</button>
    </div>
  </div>
</div>

我將在其github頁面上報告此錯誤