Question

我的导航模块包含一些细节（NavigationModel）。我有模块（SubCtrl1，SubCtrl2 ..），可以从导航部分（NavigationCtrl）中选择。每个模块都有自己的模型，不同的属性和一些共享。如果我在所选模块（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?

Answer 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>

在AngularJS中模型之间进行通信的正确方法是什么？

1 个答案: