角度 UI 路由器嵌套视图不起作用

Angular UI-Router nested views not working

本文关键字：视图 不起作用 嵌套 路由器 UI 角度      更新时间：2023-09-26

模板<h1>HELLO</h1>不会加载到analysis.client.view中的嵌套ui-view中.html但会加载分析.client.view.html文件ui-view。不知道我做错了什么。我也尝试命名嵌套的 ui-view，但它似乎没有帮助。任何帮助表示赞赏。谢谢。

oct.client.routes.js file

'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 file

<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>

我通过查看这篇文章的选定答案解决了这个问题 当用户使用 UI 路由器转换到其父状态时，将用户定向到子状态

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

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

我还没有测试过这个，但我几周前自己经历了这个问题，这就是我想出的。 您可能需要对其进行一些调整。 首先，从这里更改您的.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"
        }
    }
});

丹尼尔·科比：我试过网址："，但这没有做任何事情

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

我希望这是有道理的。

相关文章：