多个嵌套状态AngularJS ui-router

Question

如果这是一个愚蠢的问题，请原谅，但我是 AngularJS 的新手，而且对于我的一生，我无法弄清楚为什么这个嵌套视图设置没有按预期运行。

我有一个顶级<div>：

<div class="grid" ui-view></div>

有一个模块填充其视图：

angular.module('planttheidea',[
    'ui.router',
    'planttheidea.header',
    'planttheidea.mainContent',
    'planttheidea.footer'
])
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider,$urlRouterProvider){
        $stateProvider
            .state('base',{
                url:'',
                views:{
                    '':{
                        templateUrl:'app/layout.view.html',
                        controller:'LayoutCtrl'
                    }
                }
            });

        $urlRouterProvider.otherwise('/');
    }])
    .controller('LayoutCtrl',function LayoutCtrl($scope,$stateParams){
        var layout = this;
    }); 

然后我就有了那个布局视图的内容：

<header ui-view="header" class="header menubar col-p-100" ng-controller="HeaderCtrl"></header>
<main ui-view="main-content" class="main-content grid col-p-100" ng-controller="MainContentCtrl"></main>
<footer ui-view="footer" class="footer col-p-100" ng-controller="FooterCtrl"></footer>

现在我有了带有自己模块的页眉和页脚：

angular.module('planttheidea.header',[
    'planttheidea.header.menu'
])
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider){
        $stateProvider
            .state('base.header',{
                url:'',
                views:{
                    'header@base':{
                        templateUrl:'app/components/header/header.view.html',
                        controller:'HeaderCtrl as layoutHeaderCtrl'
                    }
                }
            });
    }])
    .controller('HeaderCtrl',function HeaderCtrl($scope,$stateParams){
        var layoutHeaderCtrl = this;
    });

angular.module('planttheidea.footer',[])
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider){
        $stateProvider
            .state('base.footer',{
                url:'',
                views:{
                    'footer@base':{
                        templateUrl:'app/components/footer/footer.view.html',
                        controller:'FooterCtrl as layoutFooterCtrl'
                    }
                }
            });
    }])
    .controller('FooterCtrl',function FooterCtrl($scope,$stateParams){
        var layoutFooterCtrl = this;
    });

您可以看到它们几乎相同。 header 模块运行良好（它甚至有自己的嵌套 ui-view 用于菜单，效果很好），但是页脚代码没有路由 ui-view。更奇怪的是，如果我将页脚代码复制并粘贴到标头模块中（仅使用 base.header 状态），它会按需要工作：

angular.module('planttheidea.header',[
    'planttheidea.header.menu'
])
    .config(['$stateProvider','$urlRouterProvider',function($stateProvider){
        $stateProvider
            .state('base.header',{
                url:'',
                views:{
                    'header@base':{
                        templateUrl:'app/components/header/header.view.html',
                        controller:'HeaderCtrl as layoutHeaderCtrl'
                    },
                    'footer@base':{
                        templateUrl:'app/components/footer/footer.view.html',
                        controller:'FooterCtrl as layoutFooterCtrl'
                    }
                }
            });
    }])
    .controller('HeaderCtrl',function HeaderCtrl($scope,$stateParams){
        var layoutHeaderCtrl = this;
    })
    .controller('FooterCtrl',function FooterCtrl($scope,$stateParams){
        var layoutFooterCtrl = this;
    });

我已经验证了代码是否被正确加载（我在页脚的控制器中做了一个console.log() 只是为了确保它完全运行），所以我认为它必须是分离成两个模块。我是否需要以相同的状态声明所有布局视图，或者有没有办法像我在这里所做的那样将它们分解为单独的模块？我必须相信这是可能的，因为我使用嵌套菜单模块这样做，但是它是嵌套的，而页脚是并行的，所以我担心这可能是问题所在。

任何帮助将不胜感激，但请记住，我正在学习 AngularJS，所以虽然工作代码会很棒（显然），但解释为什么会更棒。

Answer 1

所以这里有一些问题，我会先纠正一下，看看是否能解决您的问题。

假设您有这样的 DOM 布局：

<div ui-view>
    <div ui-view="view1"></div>
</div>

然后你的路由看起来像这样（即使它被分成不同的模块，只要你将其他模块注入到主模块中，它也是一样的——你就是这样）

.config(['$stateProvider','$urlRouterProvider',function($stateProvider){
        $stateProvider
            .state('base',{
                url:'/',
                templateUrl:'template.html',
                controller:'Ctrl as ctrl'
            })
            .state('base.view1',{
                url:'/view1',
                views:{
                    'view1':{
                        templateUrl:'template.html',
                        controller:'Ctrl2 as ctrl2'
                    }
                }
            });
    }])

注意事项：

因为我的base 状态直接进入没有值的 ui 视图，所以我没有带有空字符串的视图对象，我只是将其完全排除。

我的base.view1 也分配了一个 url，因为它是一个不同的状态。

因为我的 ui-view="view1" 位于我的 base 状态的 ui 视图中，所以我不需要声明该视图，因为下面的 view1@base 是我需要这样做的场景。

<div ui-view="main"></div>


.config(['$stateProvider','$urlRouterProvider',function($stateProvider){
        $stateProvider
            .state('base',{
                url:'/',
                views : {
                    'main' : {
                        templateUrl:'template.html',
                        controller:'Ctrl as ctrl'
                    }
                }

            })
            .state('base.view1',{
                url:'/view1',
                views : {
                    'main@base' : {
                        templateUrl:'template.html',
                        controller:'Ctrl as ctrl'
                    }
                }

            });
    }])

在此示例中，我希望 base.view1 “接管”，可以说是 base 所在的视图。

我真的不明白为什么您将页眉和页脚作为不同的状态。也许这是因为我没有你项目的大局，但它似乎不正常。通常您会将页眉和页脚作为父状态的一部分包含在内，然后让您的主内容区域切换为不同的嵌套状态。

希望这是有道理的，如果我能澄清更多，请告诉我。