AngularJS中模型之间通信的正确方法是什么？答案

【问题标题】：What's the correct way to communicate between models in AngularJS?AngularJS中模型之间通信的正确方法是什么？
【发布时间】：2015-03-23 18:27:42
【问题描述】：

我有包含一些细节的导航模块（NavigationModel）。我有可以从导航部分（NavigationCtrl）中选择的模块（SubCtrl1，SubCtrl2..）。每个模块都有自己的模型，具有不同的属性和一些共享的。如果我在选定模块 (SubCtrl1) 中更改某些值（模型之间共享的属性），我希望在导航详细信息部分 (NavigationCtrl) 中进行更新。

这样做的正确方法是什么？

function NavigationCtrl(){
 var vm = this;
 vm.NavigationModel = {};
 vm.NavigationModel.Name = "Test";
}

function SubCtrl1(){
 var vm = this;
 vm.SubModel= ...
}

<input ng-model="subCtrl1.SubModel.Name"></input>

当我更改输入字段中的值时，我希望在 NavigationModel 中有该值。

编辑：我检查了下一个问题What's the correct way to communicate between controllers in AngularJS?

【问题讨论】：

模块还是模型？您可能是指模型。你真正想问的是控制器之间的通信。网上有很多资源……至少这个SO question
是模特。对于每个模块（导航、SubCtrl1、SubCtrl2 ...）我都有不同的模型。更改 SubCtrl1、SubCtrl2 中的模型值会影响导航模型。我不想从按钮更新某些事件的导航模型，但我觉得我的所有模块中只有一个模型。
使用服务一般可以满足大部分需求
没错，创建一个服务并注入到你的控制器中。

标签： angularjs angularjs-scope broadcast

【解决方案1】：

您希望这些模型具有相同的值这一事实意味着它们应该是相同的模型。模型可以在应用程序的其他地方实例化一次，也可以是服务。

这里有一个工作 plunkr 演示如何使用服务来做到这一点：

http://plnkr.co/edit/4U9ALyqMx1M3KLSq6aRI?p=preview

var app = angular.module('plunker', []);


app.controller('MainCtrl', function($scope, dataService) {
  $scope.dataService = dataService;
  $scope.name = 'World';
});

app.service('dataService', function() {
  this.Name = 'test';
});

app.controller('SubCtrl', function($scope, dataService) {
  $scope.SubModel = dataService;
});

app.controller('NavigationCtrl', function($scope, dataService) {
  $scope.NavigationModel = dataService;
});

还有模板：

  <body ng-controller="MainCtrl">
    data: {{dataService}}
    <p>Hello {{name}}!</p>
    <div ng-controller="NavigationCtrl">
      {{NavigationModel}}
      <input ng-model="NavigationModel.Name">
    </div>
    <div ng-controller="SubCtrl">
      {{SubModel}}
      <input ng-model="SubModel.Name">
    </div>
  </body>

【讨论】：

模型有一些共享的属性，但它们是不同的。以这种方式使用服务，对我来说不是解决方案。