ui路由器嵌套视图未显示答案

【问题标题】：ui router nested view not showingui路由器嵌套视图未显示
【发布时间】：2016-10-10 07:16:57
【问题描述】：

我正在使用 ui-router，当我更改为状态 quiet.home.patientDashboard 时，视图 patientBoard 不会被父状态中的视图替换，因此它保持相同的视图。当点击 patientTable.html 中的表项时，我尝试更改状态。

另外，我想在 home 状态下使用 url 字段，但如果我使用它，视图不会显示。

我是 AngularJS 的新手，所以如果有什么我没有按照标准做的事情或者我道歉。

如果有人可以帮助我，那就太好了，因为我已经坚持了一天。

谢谢

neat.js：

angular.module('neat', ['ui.router'])
    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: '/views/dataBoard.html',
                controller: 'BaseController'
            })
            .state('home.board', {
                views: {
                    'patientBoard' : {
                        templateUrl: '/views/patient/patientTable.html',
                        controller: 'PatientTableController'
                    },
                    'messageBoard' : {
                        templateUrl: '/views/messageBoard.html',
                        controller: 'MessageBoardController'
                    }
                }
            })
            .state('home.board.patientDashboard', {
                views: {
                    'patientBoard@' : {
                        templateUrl: '/views/patient/patientDashboard.html',
                        controller: 'PatientDashboardController'
                    }
                }
            });

        $urlRouterProvider.otherwise('/');
    });

这是一个 HTML 示例：

index.html:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>NEAT</title>
        <link rel="stylesheet" type="text/css" href="../lib/bootstrap-3.3.6-dist/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="../css/style.css">
        <script src="../lib/jquery/jquery-1.12.3.min.js"></script>
        <script src="../lib/bootstrap-3.3.6-dist/js/bootstrap.min.js"></script>
        <script src="../lib/angularJS/angular.min.js"></script>
        <script src="../lib/angularJS/angular-ui-router.min.js"></script>
        <script src="../js/neat.js"></script>
        <script src="../js/controllers/baseController.js"></script>
        <script src="../js/controllers/patientTableController.js"></script>
        <script src="../js/controllers/patientDashboardController.js"></script>
        <script src="../js/controllers/patientInfoController.js"></script>
        <script src="../js/controllers/messageBoardController.js"></script>
    </head>
    <body ng-app="neat">
        <div ui-view></div>
    </body>
</html>

dataBoard.html：

<div class="container-fluid board">
    <div class="row">
        <div ui-view="patientBoard" class="col-sm-8"></div>
        <div ui-view="messageBoard" class="col-sm-4"></div>
    </div>
</div>

患者表.html

<div class="table-responsive">
    <table class="table table-striped table-hover table-bordered">
        <tr>
            <th>Nome</th>
        </tr>
        <tr  ng-repeat="patient in patientsCollection.items">
            <td>
                <a ui-sref="home.board.patientDashboard">{{patient.data[1].value}}</a>
            </td>
        </tr>
    </table>
</div>

【问题讨论】：

标签： javascript html angularjs angular-ui-router

【解决方案1】：

嗯，你的最后一条路线 home.board.patientDashboard 在另一个视图中，你应该添加另一个标签 ui-view 来显示它，或者重命名你的 $state，这样你就不会添加另一个视图。

【讨论】：