如何在ui路由器的父模板中显示状态
How to display a state in parents template in ui-router
>我需要在父模板中显示状态。
我的菜单.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}",
检查所有在这里
相关文章:
- 使用按钮和媒体查询切换显示状态
- 显示服务工作者状态的消息
- jQuery隐藏元素在使用CSS显示时保持隐藏状态
- 如何在状态输入ui路由器时立即显示模板,然后当承诺被解决时显示数据
- 在弹出窗口中显示状态
- 如何在 jquery 中的速率按钮下方显示消息状态
- 使用codehelper.io显示基于IP位置的状态缩写
- 这个预加载器工作吗?它不用于显示状态,只是加快了以后可能的图像加载速度
- 如何在ui路由器的父模板中显示状态
- 获取受 .slideToggle() 影响的显示状态元素
- 自动对焦属性在 Firefox 中因显示状态更改而不起作用
- 角度 SPA 未显示状态激活的 API 数据
- 如何在iOS UIAutomation中获取按钮突出显示状态
- Javascript图像预加载程序没有't显示状态
- 使用jQuery切换显示状态
- 如何启用窗口.在弹出窗口中显示状态
- 如何解决选择国家时动态显示状态的问题
- 这是在asp.net中显示状态消息的最佳方式
- 切换可见性-显示/隐藏-切换时保持显示状态
- 使用jQuery/Ajax/JS加载PHP文件和显示状态的正确或最佳过程