CODEWITHSUNDEEP
javascriptangularjsdependency-injectionangularjs-scopeangularjs-controller
Jigar Naik
Jigar Naik

Reputation: 1994

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

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.

Upvotes: 0

Views: 1457

Answers (3)

Amy Blankenship
Amy Blankenship

Reputation: 6961

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.

Upvotes: 0

Pankaj Parkar
Pankaj Parkar

Reputation: 136144

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.

Upvotes: 2

fikkatra
fikkatra

Reputation: 5792

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

Upvotes: 1

Related Questions