Почему не загружается дочерний контроллер

Question

Я пытаюсь создать структуру родительского и дочернего контроллера, которая содержит общие функции, необходимые для всех дочерних контроллеров в родительском контроллере. Когда я пытаюсь перейти из несвязанного состояния в одно из дочерних элементов, запускается только родительский контроллер.

Я пытался возиться с абстрактными контроллерами, всеми различными формами объявления дочерних и родительских элементов (с использованием точечной нотации, с использованием parent = 'parentControllerName'), и, похоже, ничего не работает.

Случайный контроллер где-то в коде

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

Когда я вызываю changeToLoginEmail, он затем направляется через мои маршруты. 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'
                        }
                    }
                })
    }
]);

Вот два контроллера:

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'];
})()

Я ожидал, что сначала будет загружен родительский контроллер, а затем загружен дочерний контроллер. Однако в консоли печатаются только первые два файла console.logs, а console.log loginEmailController никогда не запускается. В результате не загружается представление.

Кто-нибудь знает почему?

Answer 1

Использовать стандартное представление для состояния.

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

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