TypeError: $controller is not a function + Controller inside controller

Question

I am new to Angular JS and trying to call a controller inside another controller but getting below error.

ionic.bundle.js:21157 TypeError: $controller is not a function
at new <anonymous> (http://localhost:8080/itravel/www/js/controllers.js:6:2)
at invoke (http://localhost:8080/itravel/www/lib/ionic/js/ionic.bundle.js:13277:17)
at Object.instantiate (http://localhost:8080/itravel/www/lib/ionic/js/ionic.bundle.js:13285:27)
at http://localhost:8080/itravel/www/lib/ionic/js/ionic.bundle.js:17841:28
at self.appendViewElement (http://localhost:8080/itravel/www/lib/ionic/js/ionic.bundle.js:52255:24)
at Object.switcher.render (http://localhost:8080/itravel/www/lib/ionic/js/ionic.bundle.js:50449:41)
at Object.switcher.init (http://localhost:8080/itravel/www/lib/ionic/js/ionic.bundle.js:50369:20)
at self.render (http://localhost:8080/itravel/www/lib/ionic/js/ionic.bundle.js:52115:14)
at self.register (http://localhost:8080/itravel/www/lib/ionic/js/ionic.bundle.js:52073:10)

Am i missing anything here ?

angular.module('starter.controllers', []).controller('DashCtrl', function($scope) {

}).controller('TransportController',['$scope','$controller', function($scope, TrainService, $ionicModal, $window, $controller) {
console.log("TransportController");

$controller('ProfileController', {
    $scope: $scope
})

//$scope.testFunction();

$scope.transports = [];//TrainService.all();
$ionicModal.fromTemplateUrl('templates/modal.html', {
    scope: $scope
}).then(function(modal) {
    if (angular.equals(typeof $window.localStorage['profile'],'undefined')) {
        modal.show();
    } else {
        $scope.profile = JSON.parse($window.localStorage['profile']);
        if (angular.equals($scope.profile.city,'undefined') || angular.equals($scope.profile.city,'')) {
            modal.show();
        }
    }
    $scope.modal = modal;
});

$scope.saveUserProfile = function() {
    console.log("Saving User Profile");
    console.log($scope.profile);
    $window.localStorage['profile'] = JSON.stringify($scope.profile);
    $scope.modal.hide();
}

}]).controller('ProfileController', function($scope, $window, $ionicModal,         TrainService, $ionicHistory,$timeout) {

if (!angular.equals($window.localStorage['profile'],'undefined')) {
    $scope.profile = JSON.parse($window.localStorage['profile']);
}

$scope.selectedCity = "MUMBAI";

var promise = TrainService.listCities();
promise.then(function(resp){
    $scope.cities = resp.data;
})

Is this the best way to insert controller inside another controller ? I just have a common method which i want to share across all the controller kind of utility method but it calls service and using promise object it sets the value in scope variable.

Pankaj Parkar · Accepted Answer · 2016-04-11 16:12:00Z

2

Problem is with Dependency Inline Array of TransportController, where most of dependency are missed to inject in DI array, so the respected instances are undefined inside controller factory function.

.controller('TransportController',['$scope','$controller', function($scope, TrainService, $ionicModal, $window,

should be

.controller('TransportController',['$scope','$controller', 'TrainService', '$ionicModal', '$window', 
     function($scope, $controller, TrainService, $ionicModal, $window,

You should not ideally insert one controller into another controller. You could use service/factory to share data amongest your all components of your application.

answered Apr 11, 2016 at 16:12

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

fikkatra · Accepted Answer · 2016-04-11 16:09:46Z

1

It doesn't make sense to insert a controller into another controller. For common functions, it's better to use a service.

answered Apr 11, 2016 at 16:09

fikkatra

5,9024 gold badges45 silver badges74 bronze badges

1 Comment

Jigar Naik Over a year ago

Thanks, Refactored as per your suggestion.

Amy Blankenship · Accepted Answer · 2016-04-11 16:25:39Z

0

If you need to reference a parent controller inside a child View, the child View needs to [use a directive] (https://docs.angularjs.org/guide/directive) and then require the parent controller.

When a directive requires a controller, it receives that controller as the fourth argument of its link function.

If you need to get a reference from a child controller into the parent, the child can just add it to the $scope or controller as object.

IME it's very rare to actually need to do either of these things. Often if you consider the problem a little longer you can find a different way to approach it.

answered Apr 11, 2016 at 16:25

Amy Blankenship

7,0613 gold badges27 silver badges51 bronze badges

Collectives™ on Stack Overflow

TypeError: $controller is not a function + Controller inside controller

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related