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?
-
both controllers have parent child relationship or both are siblings?dhavalcengg– dhavalcengg2014-12-28 15:49:22 +00:00Commented Dec 28, 2014 at 15:49
-
1In that case it is advisable to create a service and use across controllers.dhavalcengg– dhavalcengg2014-12-28 16:08:19 +00:00Commented Dec 28, 2014 at 16:08
Add a comment
|
3 Answers
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.
Comments
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');
}
});
Comments
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); });
}
1 Comment
Hana
I used it like this : in first controller $scope.$on('RenderPage', function (event, PageId) { $scope.RenderPage (PageId)}); In the other controller: $scope.$emit('RenderPage', page.MasterPageId); but didn't work also