CODEWITHSUNDEEP
angularjsangularjs-scope
Hana
Hana

Reputation: 139

Calling a scope function in different controller

I have a function defined in a controller , I want to call it in another controller. I tried to attach it to the $rootscope so I can see in the other controller , but I couldn't . Is there a way for calling it, without attaching it to the $rootscope?

Upvotes: 1

Views: 818

Answers (3)

Philip Enc
Philip Enc

Reputation: 1072

As far as I know in AngularJS you can share info between controllers in 3 ways:
1 - Creating a Service.
2 - Creating a function linked to $rootScope.
3 - Using events ($broadcast and $on). I use a lot this method in my projects.

I think your problem is that you don't instantiate the controllers in the proper order or one of them is never instantiated, therefore the function you want to link to $rootScope in that controller or the broadcast event never fires.

E.G If you want to call a function linked to $rootScope in the 2 controller from the first one, it is impossible because the 2 controller is instantiated after the first one.
This case happens when you make calls on application runtime.

I will implement your method with some changes:

HTML:

 <div ng-controller="MyCtrl_1"></div>
 <div ng-controller="MyCtrl_2">
     <button ng-click="send()">Send Mess</button>
 </div>

JS:

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

function MyCtrl_1($scope, $rootScope) { 

   $scope.$on('RenderPage', function (event, PageId) { 
      $scope.RenderPage = PageId;
      alert($scope.RenderPage);
   });

};


function MyCtrl_2($scope, $rootScope) {

   $scope.MasterPageId = 10;
   $scope.send = function(){
      $rootScope.$broadcast('RenderPage', $scope.MasterPageId);
   }

};


Use carefully $broadcast and $emit, because has different behavior each one.

Try here: http://jsfiddle.net/1ypkb4s9/
Otherwise, post your error.

Upvotes: 1

cirtrus
cirtrus

Reputation: 497

if you want to use the same function in two or more controllers you might need a service.

or use events

function firstCtrl($scope)
{
    $scope.$broadcast('someEvent', [1,2,3]);
}

function secondCtrl($scope)
{
    $scope.$on('someEvent', function(event, mass) { console.log(mass); });
}

Upvotes: 0

Amir Popovich
Amir Popovich

Reputation: 29846

Simply wrap them with a "father controller":

HTML:

<div ng-app="myApp" ng-controller="myOuterCtrl">
    <div ng-controller="myInnerCtrl1">
        <button ng-click="outerClick()">Outer Click</button>
    </div>
    <div ng-controller="myInnerCtrl2">
        <button ng-click="innerTwoClick()">Inner Click</button>
    </div>
</div>

JS:

angular.module('myApp', []).
controller('myOuterCtrl', function ($scope) {
    $scope.outerClick = function () {
        console.log('outer click');
    }
}).
controller('myInnerCtrl1', function ($scope) {
    // nothing here!!
}).
controller('myInnerCtrl2', function ($scope) {
    $scope.innerTwoClick = function () {
        console.log('inner two click');
    }
});

JSFIDDLE.

Upvotes: 0

Related Questions