在ng-admin中创建嵌套视图

时间:2017-02-24 22:21:44

标签: angular-ui-router ng-admin

希望我能清楚地解释清楚。首先,我使用的是ng-admin,我知道如何根据this:

创建自定义视图

我正在尝试弄清楚如何在同一个自定义页面中创建嵌套视图。具体来说,我有一个视图,页面上需要有3列 - 每个列都有其功能(和服务)。

示例:

在下图中,我有3个观看次数。

  1. 第一列将调用自定义服务以获取集合列表(也就是ng-admin发言中的实体)并允许用户选择集合
  2. 中间列将显示所选集合/实体中的项目列表,并允许用户选择一个项目
  3. 最后一栏将用于编辑所选项目
  4. 访问此页面的网址应为myapp.com/ng-admin/#collections/collections/collection/1(1是要查看/修改的项目的ID)

    The nested view for ng-admin

    我的代码:

    //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>
    

    我当前的问题:

    我可以获取集合/集合来显示两个视图,但它不会显示第一列。

    如果我只是收集/我只能看到第一列(但只有当我从$ stateParam路由器选项中删除abstract:true时才会这样。)

    缺少什么?

1 个答案:

答案 0 :(得分:1)

解决:

This帮助我意识到我不需要父属性或url的第一部分,因为当'statecollections.collection'作为$ 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'
});