Question

我正在使用AngularJs，我目前遇到了ui-router的问题。状态'home.logged.board.patientDashboard'中的视图'patientBoard'不会替换父状态中的视图'patientBoard'。我不知道为什么会这样做，我在控制台上没有错误，并且所有templateUrl都是正确的。我也尝试将视图名称'patientBoard'替换为'patientBoard @'，但是没有...我会感谢任何人都能给我的帮助。

由于

的index.html

<!DOCTYPE html>
<html lang="en" ng-app="neat">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>NEAT</title>
        <base href="/">
        <link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.6/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="../css/style.css">
        <script src="webjars/jquery/1.12.4/jquery.min.js"></script>
        <script src="webjars/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <script src="webjars/angularjs/1.5.7/angular.min.js"></script>
        <script src="webjars/angular-ui-router/0.2.18/angular-ui-router.min.js"></script>
        <script src="../js/utils/utils.js"></script>
        <script src="../js/neat.js"></script>
    </head>
    <body ng-controller="LanguageController">
        <div ng-controller="AuthenticationController">
            <header>
                <div ui-view="navigationBar"></div>
            </header>
            <div ui-view></div>
        </div>
    </body>
</html>

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

neat.js

angular.module('neat', ['ui.router', 'ngStomp', 'pascalprecht.translate'])
    .config(function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/',
                views: {
                    '': {
                        templateUrl: '/views/login/login.html'
                    },
                    'navigationBar': {
                        templateUrl: '/views/navbar/navigationBar.html'
                    }
                }
            })
            .state('home.logged', {
                abstract: 'true',
                views: {
                    '@': {
                        templateUrl: '/views/board/board.html'
                    }
                }
            })
            .state('home.logged.board', {
                resolve: {
                    homeHref: function(RequestService) {
                        return RequestService.getHome()
                            .then(function(response){
                                return response.data;
                            });
                    }
                },
                views: {
                    'patientBoard' : {
                        templateUrl: '/views/board/patient/patientTable.html',
                        controller: 'PatientTableController'
                    },
                    'messageBoard' : {
                        templateUrl: '/views/board/message/messageBoard.html',
                        controller: 'MessageBoardController'
                    }
                }
            })
            .state('home.logged.board.patientDashboard', {
                params: {
                    patientHref: null
                },
                resolve: {
                    patientInfo: function($stateParams, RequestService) {
                        return RequestService.get($stateParams.patientHref)
                            .then(function(response) {
                                return response.data;
                            })
                    }
                },
                views: {
                    'patientBoard' : {
                        templateUrl: '/views/board/patient/patientDashboard.html',
                        controller: 'PatientDashboardController'
                    }
                }
            })
            .state('home.logged.board.patientDashboard.patientInfo', {
                views: {
                    '': {
                        templateUrl: '/views/board/patient/dashboard/patientInfo.html'
                    }
                },
                controller: 'PatientInfoController'
            })
            .state('home.logged.board.patientDashboard.patientAnalysis', {
                views: {
                    '': {
                        templateUrl: '/views/board/patient/dashboard/patientAnalysis.html'
                    }
                },
                controller: 'PatientAnalysisController'
            })
            .state('home.logged.board.patientDashboard.patientHistory', {
                views: {
                    '': {
                        templateUrl: '/views/board/patient/dashboard/patientHistory.html'
                    }
                },
                controller: 'PatientHistoryController'
            });

        $urlRouterProvider.otherwise('/');

    });

Answer 1

由于home.logged.board.patientDashboard是home.logged.board的子节点，因此状态（patientDashboard）正在home.logged.board中搜索名为“patientBoard”的ui视图。

将homeDashboard作为home.logged的子项（例如home.logged.patientDashboard）并且应该可以正常工作。

.state('home.logged.patientDashboard', { params: { patientHref: null }, resolve: { patientInfo: function($stateParams, RequestService) { return RequestService.get($stateParams.patientHref) .then(function(response) { return response.data; }) } }, views: { 'patientBoard' : { templateUrl: '/views/board/patient/patientDashboard.html', controller: 'PatientDashboardController' } } })

有关更多信息，请查看ui-router的文档：Nested states and views

父视图不会被替换

1 个答案: