What's the correct way to communicate between models in AngularJS?

Question

I have navigation module with some details (NavigationModel). I have modules (SubCtrl1, SubCtrl2..) that can be selected from Navigation part(NavigationCtrl). Each modules have own model with different properties and some shared. If I change some value (property shared between models) in selected module (SubCtrl1), I want to have updated in navigation details section (NavigationCtrl).

What's correct way to do this?

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>

When I change value in input field, I want to have that value in NavigationModel.

EDIT: I checked next question What's the correct way to communicate between controllers in AngularJS?

Modules or models? You probably mean models. What you really want to ask about is communication between controllers. There are plenty of resources on the Web... and at least this [SO question](http://stackoverflow.com/questions/11252780/whats-the-correct-way-to-communicate-between-controllers-in-angularjs?rq=1) — New Dev, Jan 24 '15 at 23:40
It is models. For every module (Navigation, SubCtrl1, SubCtrl2...) I have different model. Changing model values in SubCtrl1, SubCtrl2 can affect navigation model. I do not want to update navigation model on some event from button, but to have feel that I have just one model in all my modules. — cashmere, Jan 24 '15 at 23:49
That's right, create a service and inject it into your controllers. — appmux, Jan 25 '15 at 04:21

score 1 · Answer 1 · answered Jan 25 '15 at 04:30

the fact that you want these models to have the same value means they should be the same model. The model can be instantiated once somewhere else in the app, or it can be a service.

Here's a working plunkr demonstrating how to use a service to do this:

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;
});

And the template:

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

Models have some shared properties, but they are different. Using service in this way, it is not solution for me. — cashmere, Jan 25 '15 at 20:57

What's the correct way to communicate between models in AngularJS?

1 Answers1