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

问题描述 投票:0回答:1

我有一些详细信息的导航模块(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中拥有该值。

编辑:我检查了下一个问题AngularJS中的控制器之间进行通信的正确方法是什么?

angularjs angularjs-scope broadcast
1个回答
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>
© www.soinside.com 2019 - 2024. All rights reserved.