How can I communicate Between Controllers without Broadcast/Emit?

Question

I'm confused on how to communicate between controllers in Angular without using broadcast/emit.

Let's say we have Controller1 with

$scope.calledOnClick = function() { }

And we have Controller2 with

$scope.function2 = function() { }

When calledOnClick is executed from an ng-click, we want function2 to be called.

I know that we can use broadcast in order to do this, but what are some alternatives?

https://egghead.io/lessons/angularjs-sharing-data-between-controllers — Utopik, Dec 15 '14 at 16:55
Use [parent and child scopes](http://stackoverflow.com/questions/21453697/angularjs-access-parent-scope-from-child-controller) — Blazemonger, Dec 15 '14 at 17:01

score 1 · Answer 1 · edited Nov 19 '18 at 06:21

Communication is possible via shared service using javascript inheritance concept. Suppose we have two controllers i.e. "parentController" and "ChildController", and one service i.e. "sharedserviice".

(function() {
    'use strict';

    angular
        .module('MapAppication')
        .controller('parentController', parentController);

    parentController.$inject = [
        'sharedService',
        '$mdDialog',
        '$document'
    ];

    /* @ngInject */
    function parentController(sharedService,$mdDialog,$document) {
        var vm = this;
        vm.parentInput = 200;
        var service = sharedService.getInstance();

        vm.addition = function(){
            vm.sum = vm.parentInput + parseFloat(service.getData());
        }
    }
})();

'<div>
    parent controller
    <md-input-container>
        <input type="text" aria-label ="name" ng-model="vm.parentInput" required>
    </md-input-container>
    <div ng-include="../map/view/child.html"></div>
    <button class="md-primary" ng-click="vm.addition()"> addition</button>
    <div>
        sum
        <md-input-container>
            <input type="text" aria-label ="name" ng-model="vm.sum">
        </md-input-container>
    </div>
</div>'


(function() {
    'use strict';

    angular
        .module('MapAppication')
        .controller('ChildController', ChildController);

        ChildController.$inject = ['$scope','sharedService'];

    /* @ngInject */
    function ChildController($scope,sharedService) {
        var vm = this;
        vm.name = "dfghj";
        vm.childInput = 200;
        var x = sharedService.getInstance();
        x.getData =  function(){
            return  vm.childInput;
        }
        $scope.$on("$destroy", function() {
            sharedService.createNewInstance();
        });
    }
})();

<div ng-controller="ChildController as vm">
    Child controller
    <md-input-container>
        <input type="text" aria-label ="name" ng-model="vm.childInput" required>
    </md-input-container>
</div>

(function() {
    'use strict';

    angular
        .module('MapAppication')
        .service('sharedService', sharedService);

    sharedService.$inject = [];

    /* @ngInject */
    function sharedService() {
        var service = {
            getInstance : getInstance,
            getSum : getSum,
            createNewInstance  :createNewInstance
            //getData : getData
        }

        var instance;
        createNewInstance();

        function SharedObject(){
            this.getData = function(){
                return false;
            }
        }

        function getInstance(){
            return instance;
        }

        function createNewInstance(){
            instance =  new SharedObject();
        }


        function getSum(parentvalue){
            var childValue = getChildValue()
            return parentvalue + childValue;
        }
        function getChildValue(){
            return instance.getData();
            //return instance.getChildCtrValue();
        }
      return service;
    }
})();

unfortunately HTML part from above code is not visible. The main concept behind this is javascript inheritance. firstly create an instance of an object in service and then use that instance in both controllers. in above example if we call method service.getData() from one controller then service method call another method which is overdriven in child or other controller. — Dhondiram Jawade - DeeEnJay, Nov 18 '18 at 12:04

score 0 · Answer 2 · answered Dec 15 '14 at 16:59

If you use directives instead of just controllers, you can require a parent, child, or sibling directive's controller and call it that way.

Another option is to have a common service (these are singletons, remember) and 'register' your controllers somehow to receive callback events. Then you can have that forward the appropriate call.

Of course you could use $scope inheritance as well and directly call the method, though I wouldn't recommend it as it can get confusing.

How can I communicate Between Controllers without Broadcast/Emit?

2 Answers2