Question

我在下面定义了我的状态。

var app = angular.module('app', [
    'ngAnimate',
    'ngSanitize',

    'ui.router',
    'ui.bootstrap',
    'ui.jq',

    'abp'
]);

//Configuration for Angular UI routing.
app.config([
    '$stateProvider', '$urlRouterProvider',
    function ($stateProvider, $urlRouterProvider) {
        $stateProvider
            .state('home', {
                url: '/',
                templateUrl: '/App/Main/views/home/home.cshtml',
                menu: 'Home' //Matches to name of 'Home' menu in EMRNavigationProvider
            })
            .state('personview', {
                url: '/person/view',
                templateUrl: '/App/Main/views/person/view/index.cshtml',
                views: {
                    "viewTop": { templateUrl: "/App/Main/views/person/view/viewTop.cshtml" },
                    "viewMain": { templateUrl: "/App/Main/views/person/view/viewMain.cshtml" },
                    "viewAllergies": { templateUrl: "/App/Main/views/person/view/allergies.cshtml" },
                    "viewAppointments": { templateUrl: "/App/Main/views/person/view/appointments.cshtml" },
                    "viewimmunization": { templateUrl: "/App/Main/views/person/view/immunization.cshtml" },
                    "viewNotes": { templateUrl: "/App/Main/views/person/view/notes.cshtml" },
                },
                menu: 'ViewPerson',
            })
            .state('personsearch', {
                url: '/person/search',
                templateUrl: '/App/Main/views/home/home.cshtml',
                menu: 'SearchPerson'
            })
        ;
    }
]);

我的index.cshtml用于多个命名视图，看起来像

<div class="right_col" role="main">
    545465464646454545
    <div ui-view="viewTop"></div>
    <div ui-view="viewMain"></div>
    <div class="row">
        <div ui-view="viewAllergies"></div>
        <div ui-view="viewAppointments"></div>
        <div ui-view="viewimmunization"></div>
    </div>
    <div class="row">
        <div ui-view="viewNotes"></div>
    </div>
</div>

出于某种原因，当我浏览http://myhost/#/person/view时，它为我的主页提供了内容，而不是仪表板视图（多个命名视图），我希望通过上述路线的人物视图。

如果我从'personview'命名视图中删除属性视图，它会在屏幕中正确显示我的硬编码545465464646454545并且不会为主页提供内容。这告诉我有子视图：在路由下无效。

上面的路由对于不喜欢呈现的多个命名视图有什么问题？

Answer 1

您必须修改如下代码：

模板index.cshtml必须包含标记<div ui-view="content"></div>，并且可能包含viewTop，viewMain

模板View.cshtml包含以下模板之一：viewAlergies，viewAppointments等。

app.config([
'$stateProvider', '$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('person', {
            abstract: true,
            url: '/',
            template:'<div ui-view=""></div>'
        })
        .state('person.view', {
            url: '/personview',
            views: {
             '': {
                templateUrl: '/App/Main/views/person/view/index.cshtml'
             },
             'content@person.view': {
                templateUrl: '/App/Main/views/person/view/View.cshtml'
             }
            }
        })          
}

]）;

命名视图仪表板不与子视图一起使用

1 个答案: