如何在ui路由器的父模板中显示状态

How to display a state in parents template in ui-router

本文关键字:显示 状态 ui 路由器      更新时间:2023-09-26

>我需要在父模板中显示状态。

我的菜单.html是这样的:

<div class="page-bar">
    <div ncy-breadcrumb></div>
</div>
<div ui-view="page"></div>
<div ui-view></div>

和应用程序.js是:

//Menu Management
.state('menus', {
    abstract: true,
    url: "/menus",
    templateUrl: "views/menus.html",
    ncyBreadcrumb: {
        label: 'Menu Management'
    }
})
.state('menus.list', {
    url: "/list",
    templateUrl: "views/menus.list.html",
    data: {
        pageTitle: 'Menu List'
    },
    controller: "MenuListController",
    ncyBreadcrumb: {
        label: 'Menu List'
    },
    resolve: {
        deps: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load({
                name: 'MetronicApp',
                insertBefore: '#ng_load_plugins_before', // load the above css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files
                files: [
                    'css/views/ngTable.css',
                    'js/controllers/MenuListController.js'
                ]
            });
        }],
        menuObjects: function($http) {
            return $http({
                method: 'GET',
                url: '/menus?ShopId=1'
            });
        }
    }
})
.state('menus.detail', {
    url: "/{menuId}",
    templateUrl: "views/menus.detail.html",
    data: {
        pageTitle: 'Edit Menu'
    },
    controller: "MenuDetailController",
    ncyBreadcrumb: {
        label: '{{menu.defaultTranslation.name}}'
    },
    resolve: {
        deps: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load({
                name: 'MetronicApp',
                insertBefore: '#ng_load_plugins_before', // load the above css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files
                files: [
                    'js/controllers/MenuDetailController.js'
                ]
            });
        }],
        categoryObjects: function($http, $stateParams) {
            return $http({
                method: 'GET',
                url: '/categories?MenuId=' + $stateParams.menuId
            });
        },
        menuObject: function($http, $stateParams) {
            return $http({
                method: 'GET',
                url: '/menus/' + $stateParams.menuId
            });
        }
    }
})
.state('menus.detail.categories', {
    views: {
        "tab": {
            url: "/categories",
            templateUrl: "views/categories.list.html",
            ncyBreadcrumb: {
                label: 'Categories'
            },
            controller: "CategoryListController",
            resolve: {
                deps: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'MetronicApp',
                        insertBefore: '#ng_load_plugins_before', // load the above css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files
                        files: [
                            'css/views/ngTable.css',
                            'js/controllers/CategoryListController.js'
                        ]
                    });
                }]
            }
        }
    }
})
.state('menus.detail.categories.detail', {
    views: {
        "page@menus": {
            url: "/categories/{categoryId}",
            templateUrl: "views/categories.detail.html",
            ncyBreadcrumb: {
                label: '{{category.defaultTranslation.name}}'
            },
            controller: "CategoryDetailController",
            resolve: {
                deps: ['$ocLazyLoad', function($ocLazyLoad) {
                    return $ocLazyLoad.load({
                        name: 'MetronicApp',
                        insertBefore: '#ng_load_plugins_before', // load the above css files before a LINK element with this ID. Dynamic CSS files must be loaded between core and theme css files
                        files: [
                            //'css/views/ngTable.css',
                            'js/controllers/CategoryDetailController.js'
                        ]
                    });
                }],
                categoryObject: function($http, $stateParams) {
                    return $http({
                        method: 'GET',
                        url: '/categories/' + $stateParams.categoryId
                    });
                }
            }
        }
    }
}

我试图展示

根模板中的菜单.详细信息.类别.详细信息页面。当我转到网址时:

/#/menus/1/categories/33

将显示一个空白页。

在其父ui-view中显示状态的好方法是什么?

最大也是唯一的问题是URL定义的位置错误。我在这里创建了工作示例

取而代之的是这个

.state('menus.detail.categories', {
    views: {
        "tab": {
            url: "/categories",

我们必须像这样定义状态:

.state('menus.detail.categories', {
    url: "/categories",
    views: {
        "tab": {
            // url: "/categories",

而且这很可能是不正确的(因为类别将来自父州):

    .state('menus.detail.categories.detail', {
        url: "/{categoryId}", 
        views: {
          "page@menus": {
            // the categories is already defined in our parent
            //url: "/categories/{categoryId}", 

检查所有在这里