在 ng-admin 中创建嵌套视图
Create Nested Views in ng-admin
希望我能解释清楚。首先,我正在使用 ng-admin 并且我知道如何根据 this:
创建自定义视图
我正在尝试了解如何在同一自定义页面中创建嵌套视图。具体来说,我有一个视图需要在页面上有 3 列 - 每列都有它们的功能(和服务)。
示例:
在下图中,我有 3 个视图。
- 第一列将调用自定义服务以获取集合列表(在 ng-admin 中称为实体)并允许用户select 集合
- 中间栏将显示 selected collection/entity 中的项目列表,并允许用户select 一个项目
- 最后一栏将用于编辑 selected 项目
访问这个页面的url应该是myapp.com/ng-admin/#collections/collections/collection/1(1是view/edit的item的id)
我的代码:
//collections state
myApp.config(function ($stateProvider) {
$stateProvider.state('collections', {
abstract: true,
parent: 'ng-admin',
url: '/collections/',
controller: collectionsCtrl,
templateUrl: '/app/collectionsView.html'
});
//collection state
myApp.config(function ($stateProvider) {
$stateProvider.state('collections.collection', {
parent: 'ng-admin',
url: '/collections/collection/:ID',
controller: collectionCtrl,
templateUrl: '/app/collectionView.html'
});
... ommiting first two controllers
然后在收集项目控制器中,我有:
myApp.controller('ItemViewCtrl', ['$scope', 'Events', '$stateParams', '$sce', function($scope, Events, $stateParams, $sce) {
$stateParams.ID && Collection.find($stateParams.ID).then(function(item) {
$scope.item = item;
});
$scope.view = function(id) {
$state.go('days.day', {
'ID': id
})
};
}]);
我的collectionsView.html
<div ng-include src="'/app/tpl/collectionView.html'" include-replace>
</div>
<div class="inner-content full-height" ui-view></div>
在我的collectionView.html
<ul>
<li ng-repeat="collections as collection" >
<a ui-sref="collections.collection.id">
Link to collection
</a>
</li>
<ul>
我目前的问题:
我可以让 collections/collection 显示两个视图,但不会显示第一列。
如果我只转到集合/我只能看到第一列(但前提是我从 $stateParam 路由器选项中删除 abstract:true。)
缺少什么?
已解决:
帮助我意识到我不需要父 属性 或 url 的第一部分,因为当我 [=16= 时它们都是从父继承的] 作为 $stateProvider 的一部分。
//collection state
myApp.config(function ($stateProvider) {
$stateProvider.state('collections.collection', {
// parent: 'ng-admin', <-REMOVED
url: '/collections/collection/:ID', // Didn't need the /collections part of the url
controller: collectionCtrl,
templateUrl: '/app/collectionView.html'
});
希望我能解释清楚。首先,我正在使用 ng-admin 并且我知道如何根据 this:
创建自定义视图我正在尝试了解如何在同一自定义页面中创建嵌套视图。具体来说,我有一个视图需要在页面上有 3 列 - 每列都有它们的功能(和服务)。
示例:
在下图中,我有 3 个视图。
- 第一列将调用自定义服务以获取集合列表(在 ng-admin 中称为实体)并允许用户select 集合
- 中间栏将显示 selected collection/entity 中的项目列表,并允许用户select 一个项目
- 最后一栏将用于编辑 selected 项目
访问这个页面的url应该是myapp.com/ng-admin/#collections/collections/collection/1(1是view/edit的item的id)
我的代码:
//collections state
myApp.config(function ($stateProvider) {
$stateProvider.state('collections', {
abstract: true,
parent: 'ng-admin',
url: '/collections/',
controller: collectionsCtrl,
templateUrl: '/app/collectionsView.html'
});
//collection state
myApp.config(function ($stateProvider) {
$stateProvider.state('collections.collection', {
parent: 'ng-admin',
url: '/collections/collection/:ID',
controller: collectionCtrl,
templateUrl: '/app/collectionView.html'
});
... ommiting first two controllers
然后在收集项目控制器中,我有:
myApp.controller('ItemViewCtrl', ['$scope', 'Events', '$stateParams', '$sce', function($scope, Events, $stateParams, $sce) {
$stateParams.ID && Collection.find($stateParams.ID).then(function(item) {
$scope.item = item;
});
$scope.view = function(id) {
$state.go('days.day', {
'ID': id
})
};
}]);
我的collectionsView.html
<div ng-include src="'/app/tpl/collectionView.html'" include-replace>
</div>
<div class="inner-content full-height" ui-view></div>
在我的collectionView.html
<ul>
<li ng-repeat="collections as collection" >
<a ui-sref="collections.collection.id">
Link to collection
</a>
</li>
<ul>
我目前的问题:
我可以让 collections/collection 显示两个视图,但不会显示第一列。
如果我只转到集合/我只能看到第一列(但前提是我从 $stateParam 路由器选项中删除 abstract:true。)
缺少什么?
已解决:
//collection state
myApp.config(function ($stateProvider) {
$stateProvider.state('collections.collection', {
// parent: 'ng-admin', <-REMOVED
url: '/collections/collection/:ID', // Didn't need the /collections part of the url
controller: collectionCtrl,
templateUrl: '/app/collectionView.html'
});