angularjs - How to call one controller method from another controller in angular javascript? - Stack Overflow

When I try to call one controller method from another controller in the angular javascript, an error occurs. I think something is missing there. If anyone has the plete method to do this, please give me the answer.

When I try to call one controller method from another controller in the angular javascript, an error occurs. I think something is missing there. If anyone has the plete method to do this, please give me the answer.

• javascript
• angularjs

Share Follow edited Aug 13, 2016 at 7:16 Ozan 3,74922 gold badges2020 silver badges2323 bronze badges asked Aug 13, 2016 at 5:36 Moltech solutionsMoltech solutions 3111 gold badge11 silver badge22 bronze badges 3

• 3 Please include your code. – LazerSharks Commented Aug 13, 2016 at 5:37
• What is the scope of the method you are calling ? Is it bindto controller scope or rootScope? – Shikha thakur Commented Aug 13, 2016 at 6:36
• 2 "I think something is missing there." - Yes, the code is missing. – dfsq Commented Aug 13, 2016 at 6:40

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Being able to share a variables throught different controllers it's a mon issue in angular.

Your function can be seen as an object: you'll need to share it's reference throught scopes.

To perform that, you can either:
.

Use a service:

You can see services as singletons object that are injected in your controllers: a mon object shared throught your controllers.

You can use this wonderful guide to understand how to share your scope variables by using services (this guide uses factory and not services, but for your needs will be ok).
If you still wants to use services, follow this answer.

.

Use scope hierarchy:

Sometimes you have a hierarchy between controllers (and thus, scopes). Let's assume you have an HTML formatted this way:

<div ng-controller="parentController">
   <!-- some content here...-->
   <div ng-controller="childController">
      <!-- some content here...-->
   </div>
</div>

This structure will produces two different scopes: one for parentController, and one for childController. So, you childController scope will be able to access parentController scope by simply using $parent object. For example:

myApp.controller('parentController', function($scope) {
    $scope.functionExample = function(){
      console.log('hey there');
    };
})

myApp.controller('childController', function($scope) {
    $scope.functionExample();
});

Note: the parent object is accesible directly in your child scope, even if declared in your parent.

But beware of this method: you can't never really sure of your scope hierarchy, so a check if the variable is defined should be always needed.

.

Use $rootScope:

You can use rootscope as a mon shared object to share yours. But beware: this way, you'll risk to pollute your $rootScope of variables when $rootScope should be used for other uses (see message broadcasting).

Anyway, see this answer for an example use case.

.

Use Messages:

By using messages, you can share objects references, as shown in this example:

myApp.controller('parentController', function($scope, $rootScope) {
     var object = { test: 'test'}
     $rootScope.$broadcast('message', message)
     console.log('broadcasting');
});


myApp.controller('childController', function($scope, $rootScope) {            
     $scope.$on('message', function(message){
        console.log(message);
     });
}); 

.

In the end, i suggest you to use a mon service for all your variables or, where you can, use the scope hierarchy method.

If two controllers are nested in one controller, then you can simply call the other by using:

$scope.parentMethod();

Angular will search for parentMethod() function starting with the current scope up to it reach the $rootscope