多个嵌套状态 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;
    });

你可以看到它们几乎是一样的。页眉模块运行良好（它甚至有自己的嵌套 ui-菜单视图，工作正常），但是页脚代码未路由 ui-视图。更奇怪的是，如果我将页脚代码复制并粘贴到页眉模块中（仅使用 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-view 我没有空字符串的视图对象，我只是完全排除它。

我的 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 到 "takeover"，也就是说，base 所在的视图。

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

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

多个嵌套状态 AngularJS ui-router

Multiple nested states AngularJS ui-router

angularjs

angular-ui-router