Communication between controllers Angularjs, service or parent controller

Question

I am wondering which is best practise, or perhaps in which situation one way is preferred over the other.

The setup is as follows if we use a parent(main) controller:

<div ng-controller="Controller Main">
  <div ng-controller="Controller 1"></div>
  <div ng-controller="Controller 2"></div>
</div>

So we can communicate here because both controller 1 and 2 have access to Controller Main's scope.

The other way is if we use a service,

<div ng-controller="Controller 1"></div>
<div ng-controller="Controller 2"></div>

So what I think we're doing is that we inject the service to the controllers.

I've seen both solutions but I don't know which one is preferred.

Jonathan Rowny · Accepted Answer · 2014-02-05 21:19:49Z

2

It's preferred to use a service. Communicating by using a parent controller breaks encapsulation not to mention it can be pretty buggy if you get someone who doesn't know about the limitations of primitives and scope inheritance etc. Angular's dependency injection works really well and your code will be more flexible in the long run if you do it that way.

Another advantage of a service is code readability. If Controller 1 references something in Controller Main the person reading the code may not know where it came from. With a service you see it injected, you immediately know where to look for it.

answered Feb 5, 2014 at 21:19

Jonathan Rowny

7,5981 gold badge21 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Samir Alajmovic Over a year ago

Yes, I started with thinking parent controller is easier, but then it's more modular and easier to read the code if you seperate the different controllers and use a "bridge" between them. I'd also reckon it's easier to extend and maintain the code that way, and perhaps easier to detect bugs. My first solution was actually parent controller because I've only really comfortable with the scope idea so far, but then I googled a bit and see this new way of introducing services to do the job instead.

Community · Accepted Answer · 2017-05-23 10:31:42Z

0

You can use like:

'use strict';
                (function(window, angular, undefined) {
                    'use strict';
                    angular.module('ctrl.parent', [])
                        .controller('ParentController',function (scope) {
                            scope.vocalization = '';
                            scope.vocalize = function () {
                                console.log(scope.vocalization);
                            };
                    });
                })(window, angular);
                angular.module('app',['ctrl.parent'])
                    .controller('ChildCtrl', function($scope,$controller){
                    angular.extend($scope, new $controller('ParentController', {scope:$scope}));
$scope.vocalization = 'CIP CIP';
                });

take a look angularjs-share-config-directives-between-controllers

it's longish

edited May 23, 2017 at 10:31

CommunityBot

11 silver badge

answered Feb 5, 2014 at 21:29

Whisher

32.9k34 gold badges129 silver badges204 bronze badges

2 Comments

Samir Alajmovic Over a year ago

I'm not yet familiar with the extend concept but I will look into it.

Jonathan Rowny Over a year ago

This is for sharing config, not necisarily communicating between controllers.

Collectives™ on Stack Overflow

Communication between controllers Angularjs, service or parent controller

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related