Invoke function between two controllers while using routeprovider

Question

I am using route provider as follows,

var appModule = angular.module('ngLogin', ['ngRoute','restangular','btford.socket-io','ngSanitize','xeditable']);

appModule.config(['$routeProvider',
              function($routeProvider) {
                $routeProvider.
                when('/home', {
                  templateUrl: 'sample/homepage.html',
                    controller: 'ngHomeControl'
                    }).
                when('/contacts', {
                  templateUrl: 'sample/homepage.html',
                    controller: 'ngContactControl'
                  });
            }]);

Here I need to call function from ngHomeControl to ngContactControl.

I tried as follows, but the function didn't invoked.

appModule.controller('ngHomeControl', function($scope,$routeParams,socket,Restangular,$http) {

$rootScope.$broadcast('getFriendList',{"userName":userName});

});

appModule.controller('ngContactControl', function($scope,$routeParams,$rootScope,socket,sharedProperties,Restangular,$http,$timeout) {

$scope.$on("getFriendList",function(event,data)
        {
          console.log('getFriendList');
        });
});

Can anyone help me to resolve?

Answer 1

This will not work as only one controller is instantiated at a time (in your case).

A proper way would be to use a service. There is a nice article that wil help you with this.

See also this answer on how to create a service.

Based on those two resources you should came up with something similar to this:

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

appModule.config(['$routeProvider',
              function($routeProvider) {
                $routeProvider.
                when('/home', {
                  templateUrl: 'home.html',
                    controller: 'ngHomeControl'
                    }).
                when('/contacts', {
                  templateUrl: 'contacts.html',
                    controller: 'ngContactControl'
                  });
            }]);

appModule.service('friendsService', function(){
    this.getFriendList = function () {
        return ['John', 'James', 'Jake'];
    }
});

appModule.controller('ngHomeControl', function($scope, friendsService) {
    $scope.homeFriends = friendsService.getFriendList();
});

appModule.controller('ngContactControl', function($scope, friendsService) {
    $scope.contactFriends = friendsService.getFriendList();
});

There is a complete working JSFiddle so you can test it out. Please also checkout the console output to see when used components are instantiated.

You will see that controllers are instantiated each time the route changes - they are instantiated implicitly via the ngController directive used inside templates. The service is instantiated only once and this is at the time when it is needed/injected for the first time.

Answer 2

The reason your event listener isn't fired is because there isn't a ngContactControl instance alive when your at /home. You can create a parent controller, which handles the scope events but a better way is to use a service that is shared among the controllers that need this functionality.

See this plunker for an example how to share data and/or functions via a service.