AngularJS中模块之间的通信
Posted
技术标签:
【中文标题】AngularJS中模块之间的通信【英文标题】：Communication between modules in AngularJS 【发布时间】：2013-06-07 06:50:08 【问题描述】：我想在一个 shellpage 中可以将许多角度模块附加到不同区域。 但是 AngularJS 中的模块可以互相“交谈”吗？ 如果是，怎么做？
【问题讨论】：
【参考方案1】：模块可以通过多种方式交互或共享信息
一个模块可以被注入到另一个模块中，在这种情况下，容器模块可以访问被注入模块的所有元素。如果您查看angular seed 项目，会为指令、控制器、过滤器等创建模块，类似于这样
angular.module("myApp", ["myApp.filters", "myApp.services", "myApp.directives", "myApp.controllers"]) 这更像是一种重用机制而不是通信机制。
@Eduard 解释的第二个选项是使用服务。由于服务是单例的并且可以被注入到任何控制器中，它们可以充当一种通信机制。
正如@Eduard 再次指出的第三个选项是使用 $scope 对象的父控制器，因为它可用于所有子控制器。
您还可以将 $rootScope 注入需要交互的控制器中，并使用 $broadcast 和 $on 方法创建服务总线模式，其中控制器使用 pub\sub 机制进行交互。
我倾向于第四个选项。也可以在这里查看更多详细信息What's the correct way to communicate between controllers in AngularJS?
【讨论】：
我将选择第四个选项。非常感谢。 我在这里有点困惑（更具体地说，第 4 条）。文档指出每个应用程序都有自己的$rootScope。当你说$rootScope需要注入时，你的意思是firstModule中的$rootScope需要注入secondModule的控制器吗？
应用程序不是模块。通常只有一个应用程序，其中包含多个模块。 $rootscope 在单个应用程序中的模块之间共享。【参考方案2】：
使用服务机制在模块的控制器之间进行通信。
(function ()
'use strict';
//adding moduleB as dependency to moduleA
angular.module('Myapp.moduleA', ['Myapp.moduleB'])
.controller('FCtrl', FCtrl)
.service('sharedData', SharedData);
//adding the dependency shareData to FCtrl
FCtrl.$inject = ['sharedData'];
function FCtrl(sharedData)
var vm = this;
vm.data = sharedData.data;
//shared data service
function SharedData()
this.data =
value: 'my shared data'
//second module
angular.module('Myapp.moduleB', [])
.controller('SCtrl', SCtrl);
SCtrl.$inject = ['sharedData'];
function SCtrl(sharedData)
var vm = this;
vm.data = sharedData.data;
)();
而html如下：
<html ng-app="firstModule">
<body>
<div ng-controller="FCtrl as xyz">
<input type=text ng-model="xyz.data.value" />
</div>
<div ng-controller="SCtrl as abc">
<input type=text ng-model="abc.data.value" />
</div>
</body>
</html>
【讨论】：
【参考方案3】：你可以使用services和控制器继承（这里解释http://docs.angularjs.org/guide/dev_guide.mvc.understanding_controller）
在任何情况下，您都应该考虑不要让控制器紧密耦合。
【讨论】：
link 坏了你能修好吗以上是关于AngularJS中模块之间的通信的主要内容，如果未能解决你的问题，请参考以下文章