为什么不加载子控制器

时间:2019-01-16 15:33:28

标签: javascript angularjs angular-ui-router frontend

我正在尝试创建一个父子控制器结构,该结构包含父控制器中所有子控制器必需的通用功能。当我尝试从不相关的状态更改为子状态之一时,仅运行父控制器。

我尝试弄乱抽象控制器,以各种不同的形式声明子代和父代(使用点表示法,使用parent ='parentControllerName'),似乎没有任何作用。

代码中某处的随机控制器

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

当我调用changeToLoginEmail时,这将通过我的route.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打印在控制台中,而loginEmailController的console.log永远不会运行。结果是没有视图被加载。

有人知道为什么吗?

1 个答案:

答案 0 :(得分:0)

使用默认视图状态集。

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

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