Angularjs: Injecting one controller in another failed

Question

I have this controller A which I'm trying to inject in every other controller. What controller A does is, it communicates with a factory (which does some authentication services, communicates with database)

My factory looks like this and I named it myFactoryServices.js and included the link to it in my index page.

(function() {

angular
.module('myApp.myFactoryServices', [])

.factory('FactoryService', ["$http", "$location", function($http, $location){
    var my = this;
    my.someFunction = function()
    {
        //communiate with backend and return data
    }
    return my;
}]);

})();

and my Controller A looks like this:

(function() {

    angular
        .module('myApp.ControlA', [])

        .controller('ControllerA', function($scope,$routeParams, FactoryService) {
            var my = this;      
            FactoryService.someFunction();

        });
})();

And I am trying to inject this controller in every other controller, but it does not work. I am pretty new to this kind of programming, can anyone tell me where I made mistake?

This is how I tried injecting a controller into another.

(function() {

    angular
        .module('myApp.ControlB', [])

        .factory('ControllerBService', function($http) {
            var baseUrl = 'backendurl/';
            return {
                getInfo: function() {
                    return $http.get(baseUrl+ 'getInfo');
                }
            };
        })

        .controller('ControllerB', function($scope,$routeParams, ControllerBService,ControllerA) {
                var my = this;      

        });
})();

No error is coming, and the controller is not getting injected as I am not able to use those factory services. is this the correct method?

Cotnrollers are not injectable. If you want to share some behavior use service/factory for that. — sielakos
– sielakos, Commented May 21, 2016 at 8:41

Sajeetharan · Accepted Answer · 2016-05-21 08:47:49Z

2

First of all you cannot inject controller to another controller, and One simple solution would be, instead of having each angular modules for each components, declare a module and add the factory service to controllers as dependency.

Code:

var app = angular.module('myApp', []);
app.factory('FactoryService', ["$http", "$location", function($http, $location){
    var my = this;
    my.someFunction = function()
    {
        //communiate with backend and return data
    }
    return my;
}]);

app.controller('ControllerA', function($scope,$routeParams, FactoryService) 
 {
   var my = this;      
   FactoryService.someFunction();

});

app.controller('ControllerB', function($scope,$routeParams, FactoryService)
{
    var my = this;      
    FactoryService.someFunction();
});

edited May 21, 2016 at 8:47

answered May 21, 2016 at 8:42

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sielakos · Accepted Answer · 2016-05-21 08:56:34Z

0

Controllers are not injectable, because controller is not singleton. Controllers are constructor functions used to create instances of controllers. For example you can have multiple instances of one controller in your app:

angular.module('app', []);

angular
  .module('app')
  .controller('Example', function () {
    this.x = Math.random();
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<div ng-app="app">
  First instance: <br>
  <div ng-controller="Example as Ex1">
    {{Ex1.x}}
  </div>
  Second  instance: <br>
  <div ng-controller="Example as Ex2">
    {{Ex2.x}}
  </div>
</div>

So if you want to share some behavior between controller you should use factory instead.

edited May 21, 2016 at 8:56

answered May 21, 2016 at 8:51

sielakos

2,40413 silver badges13 bronze badges

Comments

georgeawg · Accepted Answer · 2016-05-21 14:39:52Z

0

To inject a controller into another controller, use the $controller service.

app.controller('ControllerB', function($scope,$routeParams, $controller) {
        var my = this;  
        $scope.ctrlA = $controller("ControllerA", {$scope: $scope});    

});

The above example creates an instance of ControllerA as ctrlA with its $scope injected with the scope of the parent controller.

For more information, see AngularJS $controller Service API Reference.

answered May 21, 2016 at 14:39

georgeawg

49k13 gold badges78 silver badges98 bronze badges

Collectives™ on Stack Overflow

Angularjs: Injecting one controller in another failed

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related