Question

我使用ui-router，当我更改为状态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>

Answer 1

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

ui路由器嵌套视图没有显示

1 个答案: