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