Why isn't the child controller being loaded

Question

I'm trying to create a parent and children controller structure that contains common functions necessary for all child controllers in the parent controller. When I try to change from an unrelated state to one of the children, only the parent controller is run.

I've tried messing around with abstract controllers, all different forms of declaring a child and a parent (using dot notation, using parent = 'parentControllerName'), and nothing seems to work.

Random controller somewhere in the code

changeToLoginEmail() => {
    $state.go('login.email');
}

When I call changeToLoginEmail, this is then routed through my routes.js

angular.module('myModule')
    .config(['$stateProvider', function ($stateProvider) {

            $stateProvider
                .state('login', { // Parent Controller
                    abstract: true,
                    url: '/login',
                    views: {
                        "master": {
                            controller: 'loginController'
                        }
                    }
                })
                .state('login.email', { // One of the children
                    url: '/login/email',
                    views: {
                        "email": {
                            controller: 'loginEmailController',
                            templateUrl: '/components/loginEmail/loginEmailView.html'
                        }
                    }
                })
    }
]);

Here are the two controllers:

loginController:

(() => {
    'use strict';

    angular
        .module('myModule')
        .controller('loginController', loginController);

    function loginController($scope, $state) {
        console.log("state", $state);
        console.log("scope", $scope);
    }

    loginController.$inject = ['$scope', '$state'];
})()

loginEmailController:

(() => {
    'use strict';

    angular
        .module('myModule')
        .controller('loginEmailController', loginEmailController);

    function loginEmailController($scope, $state) {
        console.log("I was loaded woopie");
    }

    loginEmailController.$inject = ['$scope', '$state'];
})()

I expected the parent controller to be loaded first and then the child controller to be loaded. However, only the first two console.logs are printed in the console, while the loginEmailController's console.log never runs. The result is no view being loaded.

Does anyone know why?

Are you sure you need /login/email in the child for 'url', and not just /email? — Frank Modica
I'm not sure of anything by this point. But neither variation works. It appears it was indeed unnecessary, so thank you for that :) Problem still persists though. — Luis Figueiredo
As Frank suggested - Try changing url: '/login/email', to url: '/email', — Alon Eitan
If you access /login/login/email this link into browser you will see logs are print in order. — Sameer
Thank you for finding the url mistake, fixed that so it won't cause any problems. Nonetheless, the child controller is still not running — Luis Figueiredo

bugMaker-237 bugMaker-237 · Accepted Answer · 2019-01-16T19:26:24

Use default view set for state.

...
views: {
    '': {
           controller: 'loginController'
     }
}
...

...
views: {
      '': {
          controller: 'loginEmailController',
          templateUrl: '/components/loginEmail/loginEmailView.html'
      }
}
...

Why isn't the child controller being loaded

1 Answers