Communication between controllers using "Controller as" syntax

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/

P.S. 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"?

In your service, try returning the object - your service needs to provide a "service". In your case, all that you are doing is initializing the service, not returning anything from it — callmekatootie, May 29 '14 at 13:06
Hm, a lot of example that I saw here and also on the web does not return anything in services, only in factories, e.g. here: http://stackoverflow.com/questions/16565105/angularjs-what-is-difference-of-creating-service-method-between-module-service-a — Le_Coeur, May 29 '14 at 16:26

score 0 · Answer 1 · answered May 29 '14 at 13:16

0

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/

answered May 29 '14 at 13:16

Dayan Moreno Leon

5,357
2
22
24

What if I have a big service with 10-15 different variables, should I pack everything in return value, or is there any more elegant solution? – Le_Coeur May 29 '14 at 16:14
the service should always return the object that wraps all the functionalities you want to share, you can have private variables to your service but you need to expose some api for others to use, that api can be functions or in this case a variable. The way to build the api will depend on your data structure and functionalities to provide. What is your idea for a more elegant solution? – Dayan Moreno Leon May 29 '14 at 17:13
Hm, I think you mixed service and factory, at least many examples of services that I saw did not return anything, like here: http://stackoverflow.com/questions/16565105/angularjs-what-is-difference-of-creating-service-method-between-module-service-a – Le_Coeur May 29 '14 at 18:20

Communication between controllers using "Controller as" syntax

1 Answers1