javascript - 如何在 ui-router 的父模板中显示状态

Question

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

我的menu.html是这样的:

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

app.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.detail.categories.detail页面。当我访问网址时:

/#/menus/1/categories/33

显示空白页。

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

Answer 1

最大也是唯一的问题是 URL 定义的位置错误。我创建了working example here

而不是这个

.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}", 

检查所有here