Angular UI-Router嵌套视图不起作用

Question

模板<h1>HELLO</h1>不会加载到analysis.client.view.html中的嵌套ui-view中，但是会加载analysis.client.view.html ui-view文件。 无法弄清楚我在做什么错。 我也尝试命名嵌套的ui视图，但这似乎没有帮助。 任何帮助表示赞赏。 谢谢。

oct.client.routes.js文件

'use strict';

//Setting up route
angular.module('oct').config(['$stateProvider',
    function($stateProvider) {
        // Projects state routing
        $stateProvider.
        state('octAnalysis', {
            url: '/oct_analysis',
            templateUrl: 'modules/oct/views/sidebar.client.view.html'
        });

        $stateProvider.
        state('octView', {
                url: '/oct_view',
                templateUrl: 'modules/oct/views/analysis.client.view.html'
            })
            .state('octView.sidebar', {
                template: '<h1>HELLO</h1>'
            });

    }
]);

analysis.client.view.html文件

<section class="analysis" ng-controller="AnalysisCtrl">
    <div id="sidenav-cntnr">
        <md-sidenav md-component-id="left" class="md-sidenav-left" md-is-open="" md-is-locked-open="menuPinned">
            Left Nav!
            <div id="pin-cntnr">
                <button ng-click="togglePinLeftMenu()">Pin</button>
                <button ng-click="closeLeftMenu()">Close</button>
            </div>
            <div ui-view></div>

        </md-sidenav>
    </div>
</section>

Answer 1

我还没有测试过，但是几周后我自己经历了这个问题，这就是我的想法。 您可能需要稍微调整一下。 首先，从此更改.html ：

<div ui-view></div>

到此命名视图：

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

然后这样更改状态配置：

$stateProvider.state('octView', {
    url: '/oct_view',
    views: {
        "": {
            templateUrl: 'modules/oct/views/analysis.client.view.html',
        }
        "sidebar": {
            template: "HELLO"
        }
    }
});

丹尼尔·科比（Daniel Kobe）：我尝试了网址：“

问题是，您实际上并没有使用子状态。 URL匹配时会激活状态，因此只有在浏览器的URL为"/oct_view/ " （注意空格）时才会激活侧边栏。 您实际上是在使用一种状态，具有多个视图。 您想将用户定向到由状态表示的页面，并且希望侧栏作为该状态的一部分加载。 侧边栏可以有自己的控制器。 有关更多信息，请参见命名视图上的Angular UI文档 。

我希望这是有道理的。

Answer 2

我通过查看此帖子的选定答案来解决问题， 当用户使用UI-Router转换到其父状态时将其定向到子状态

我更改了路由代码，如下所示：

    $stateProvider.
    state('octView', {
            url: '/oct_view',
            abstract: true,
            views: {
                '': {
                    templateUrl: 'modules/oct/views/analysis.client.view.html'
                }
            }
        })
        .state('octView.sidebar', {
            url: '',
            template: 'HELLO'
        });