Question

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

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

丹尼尔科比：我试过网址：＆＃39; ＆＃39;但这没有做任何事情

问题是，你实际上并没有使用儿童状态。 URL匹配时会激活状态，因此仅当浏览器的URL为"/oct_view/ "时才会激活侧边栏（注意空格）。您实际上正在使用一个具有多个视图的状态。您希望将用户定向到由州表示的页面，并且您希望侧边栏作为该状态的一部分加载。侧栏可以拥有自己的控制器。有关详细信息，请参阅Angular UI documentation on named views。

我希望这是有道理的。

Answer 2

我通过查看此帖子的所选答案Directing the user to a child state when they are transitioning to its parent state using 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'
        });

Angular UI-Router嵌套视图无效

oct.client.routes.js文件

analysis.client.view.html文件

2 个答案: