如何在UI路由器的父母模板中顯示狀態

Question

我需要在父母模板中顯示一個狀態。

我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", 

而且也是這很可能是不正確的（becuse類別將來自父狀態）：

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

檢查全部here