Javascript ui路由器嵌套视图未显示_Javascript_Html_Angularjs_Angular Ui Router

Javascript ui路由器嵌套视图未显示

javascript html angularjs

Javascript ui路由器嵌套视图未显示,javascript,html,angularjs,angular-ui-router,Javascript,Html,Angularjs,Angular Ui Router,我正在使用ui路由器，当我更改为状态neat.home.patientDashboard时，patientBoard视图不会被父状态的视图替换，因此它保持相同的视图。我尝试在单击patientTable.html中的表项时更改状态此外，我希望在主状态中获取url字段，但如果获取该字段，则不会显示视图我对AngularJS有点陌生，所以如果有什么事情我没有按照标准去做，或者有什么事情我道歉如果有人能帮我做这件事，那就太好了，因为我已经做了一天了谢谢 neat.js： angular.mod

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

此外，我希望在主状态中获取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>

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


诺姆
{{patient.data[1].value}

Uhm您的最后一条路线

home.board.patientDashboard

在另一个视图中，您应该添加另一个标签

ui视图来显示它，或者重命名您的$state
，这样您就不会添加另一个视图