how to call function of page1(service1.html) controller( ctrl1 ) from another page2(service2.html) controller( ctrl2 ) in angularjs

Question

I try to call function of page1(service1.html) controller( ctrl1 ) from another page2(service2.html) controller( ctrl2 ) in angularjs. The both page has parent controller (parentctrl). Anyone can give me idea for fix this problem..

Sample Code:

app.controller("parentctrl", function($scope) {
  $scope.$on('emitdata', function(event, data) {
    $scope.$broadcast('broadcast-data', data);
  });
});

Page 1 : service1.html

app.controller("ctrl1", function($scope) {
  $scope.$on('broadcast-data', function(event, data) {
    $scope.received = data;
  })
});

Page 2 : service2.html
app.controller("ctrl2", function($scope) {
  $scope.emit = function() {
    $scope.$emit('emitdata', {'key': 'uu'});
  };
});

Well, I don't think ng-router allows you to have more then one route active at the same moment, so I guess your controllers are not both active and that could be why your ctrl1 $scope.$on is not working. I'd suggest you use ui-router if you need greater flexibility — imbalind, Dec 18 '15 at 18:17

score 1 · Accepted Answer · answered Dec 18 '15 at 20:02

The problem with your code is that when you're at route service2 the scope of service1 will be destroyed and vice versa. So you can't pass it like this.

You could use a factory where you're storing the message or you could emit and store the received value at a variable at $rootScope.

With $rootScope or a factory you can add the received value to a $scope variable once you've entered the route.

I think a factory is better / cleaner but both will be OK.

Please have a look at the demo below or this jsfiddle. (It uses the $rootScope method.)

angular.module('demoApp', ['ngRoute'])
 .controller("parentctrl", function($rootScope, $scope) {
   $scope.$on('emitdata', function(event, data) {
      //$scope.$broadcast('broadcast-data', data);
      $rootScope.received = data;
    });
  })
  .controller("ctrl1", function($rootScope, $scope) {
   $scope.received = $rootScope.received || 'nothing received';
    /*scope.$on('broadcast-data', function(event, data) {
      $scope.received = data;
      console.log('received data', data)
    });*/
 })
  .controller("ctrl2", function($scope) {
    $scope.emit = function() {
      $scope.$emit('emitdata', {'key': 'uu'});
    };
 })
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
     .when('/service1', {
      templateUrl: 'service1.html',
      controller: 'ctrl1'
    })
    .when('/service2', {
      templateUrl: 'service2.html',
      controller: 'ctrl2'
    })
    .otherwise({redirectTo:'/service1'});

    // configure html5 to get links working on jsfiddle
    //$locationProvider.html5Mode(true);
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular-route.js"></script>

<div ng-app="demoApp" ng-controller="parentctrl">
  <script type="text/ng-template" id="service1.html">
   Service page 1
    {{received}}
  </script>
  <script type="text/ng-template" id="service2.html">
   Service page 2
    <button ng-click="emit()">call service 1</button>
  </script>
  
  <div ng-view=""></div>
  <a href="#/service1">service 1 page</a>
  <a href="#/service2">service 2 page</a>
</div>

can i inherit one page controller from another page controller? — uday s, Dec 19 '15 at 12:09
Sure, you can read more about it in this [SO question](http://stackoverflow.com/questions/16539999/angular-extending-controller) and see it in action at this [fiddle version](https://jsfiddle.net/awolf2904/zwg5tqm1/3/). — AWolf, Dec 19 '15 at 15:28

how to call function of page1(service1.html) controller( ctrl1 ) from another page2(service2.html) controller( ctrl2 ) in angularjs

1 Answers1