AngularJS中的重型控制器通信

我已經實現了一個帶有AngularJS的單頁應用程序。該頁面由中間的內容區域和圍繞中心組成的部分組成，顯示附加信息並提供操作中心的方法。AngularJS中的重型控制器通信

enter image description here

每個部分（稱爲Side Info）和內容區域具有分配給它們的單獨AngularJS控制器。目前，我通過$rootScope.$broadcast和$scope.$on()進行通信，例如，

app.controller('PropertiesController', function ($scope, $rootScope) { 

    $scope.$on('somethingHappened', function(event, data){ 
     // react 
    }); 

});

我再調用與其他控制器進行通信：

$rootScope.$broadcast('somethingHappened', data);

我有相當多的通信控制器之間發生的事情。特別是如果內容區域發生了什麼事情，則需要採用多個輔助信息元素。另一種方式也很常見：用戶提交表單（位於側面信息中）以及內容區域和其他側面信息元素必須採用。

我的問題： 有沒有更好的方法來處理SPA重型控制器通信？

該代碼工作正常，但它已經變得有點混亂（例如，很難找到哪些事件處理等）。由於該應用程序在未來幾周可能會增長很多，因此我希望儘快完成這些更改（如果有更好的解決方案）。

來源

2015-02-05 WeSt

我正在做我的第一個Angular項目，其中包括創建一個頁面APP。我在模板中創建模板，並將指令中的所有作用域處理成一個數組。然後我可以捕捉並修改這些。不知道這是否是一種好方法，或者它是否可以幫助你。 – nada 2015-02-05 15:40:44

使用共享服務是另一種溝通方式 – 2015-02-05 15:42:29

通常，您可以將共享內容放入上級PagesController。所以你可以通過示波器輕鬆訪問它們。有時候，你可以添加一些將共享狀態變量的服務。 – dubadub 2015-02-05 15:43:35

您可以使用

$rootScope.$emit('some:event') ;

，因爲它會向上和rootscope北京時間頂級

使用

var myListener = $rootScope.$on('some:event', function (event, data) { }); 
$scope.$on('$destroy', myListener);

趕上事件

然後你有一個通信在沒有冒泡的同一級別的根管鏡

這是我實現eventbus服務

http://jsfiddle.net/navqtaoj/2/

編輯：你可以使用一個命名空間像一些：事件分組和組織您的事件名稱更好，添加日誌輸出當事件被觸發並且當事件被捕獲時，您可以輕鬆找出是否發生或捕獲錯誤的事件名稱。

來源

2015-02-05 15:46:05 micha

你必須按順序多種選擇，以避免廣播呼叫：使用服務就像是在評論中提到的控制器之間

共享數據。你可以看到如何在：https://thinkster.io/egghead/sharing-data-between-controllers
爲每個部分（內容區和邊信息）的整個頁面和子控制器創建一個主控制器。使用範圍原型繼承。例如：

如果在主控制器您有： $scope.myObject = someValue;

兒童控制器，你可以設置： $scope.myObject.myProperty = someOtherValue;

你可以從你的主控制器訪問myObject.myProperty

來源

2015-02-05 16:06:06 rave

作用域繼承對於不直接在作用域上使用變量很重要，更好地將您的變量註冊到作用域中的對象上，以便在模型名稱中有一個點http://stackoverflow.com/questions/14049480/what-are-the -nuances的範圍外-原型-原型繼承功能於angularjs/14049482＃14049482 – micha 2015-02-05 16:13:26

這真的很有趣。 Pub/Sub應該是一個正確的解決方案。

您可以使用Angular服務作爲您的MVC的模型爲您的項目添加額外的訂單，併爲每個更改更新此模型。這裏的問題是你應該在你的服務中實現一個可觀察的模式並向他們註冊，以便實現同步。所以 - 我們回到了Pub/Sub（或者您可以考慮的其他Observable解決方案...）。

但是，這個項目的組織會更好。

例如 - SideInfo1Service將是服務/模型。每個屬性的變化將觸發可觀察到的變化，這將改變所有聽衆：

myApp.factory('SideInfo1Service', function($scope){ 
    var _prop1; 
    return { 
     setProp1: function(value){ 
      $scope.$broadcast('prop1Changed', value); 
      _prop1 = value;  
     }, 
     getProp1: function(){ 
      return _prop1; 
     } 
    } 
});

你可以找到採用了棱角分明服務爲您的MVC模型那些真正有趣的博客文章：

http://toddmotto.com/rethinking-angular-js-controllers/

http://jonathancreamer.com/the-state-of-angularjs-controllers/

而且，這篇文章是關於Angularjs中的可觀察模式：

https://stackoverflow.com/a/25613550/916450

希望這會有所幫助（：

來源

2015-02-06 19:07:36

非常重要的問題，非常好的答案。

我得到了啓發，並創造了三項plunks顯示每種技術：