使用“ Controller as”语法的控制器之间的通信

Question

As I found on stackoverflow the proper way to communicate between angular controllers is by using services. There are few topics here which demonstrate how to do it by using $scope. However, this approach (using services) is not working for me if I use "controller as" syntax, without $scope. Here is my example:

HTML

<div ng-app="myapp">
    <div ng-controller="PersonCtrl as person">
        <p>{{ person.name['last'] }}</p>
    </div>
     <div ng-controller="PersonCtrl2 as person2">
         Change name <button type="button" ng-click="person2.changeName()"> To Ted</button>
     </div>
</div>

JS

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

myapp.controller('PersonCtrl', function (myService1) {
    this.name = myService1.newName;
});

myapp.service('myService1', function() {
    this.newName = {'last': 'Bob'};
});


var PersonCtrl2 = function(myService1) {
    this.service = myService1;
};

PersonCtrl2.prototype.changeName = function() {
    alert('a');
    this.service.newName = {'last': 'Ted'};
};

myapp.controller('PersonCtrl2', PersonCtrl2);

Fiddle http://jsfiddle.net/vxQK7/

PS I also wanted to use $watch for update notification, but as far as I now, I can use it only from $scope and not by using "this"?

Answer 1

as callmekatootie said you need to return something in your service but you also need not to break the reference of your model

 this.name = myService1.newName

this would create a link betwin this.name and service.newName not to the value but to the actual object

 this.service.newName = {'last': 'Ted'};

this would destroy the object to which the other controller is linked to and create a new one to of wich the other controller has no idea that exists.

the solution is very simple as posted in this link

http://jsfiddle.net/vxQK7/1/