嵌套狀態的角度ui路由器多視圖

Question

總之我想這樣做：

btn1 |其中將包含一系列鏈接項目：itm1，itm2，... - >現在當我點擊itm1時，讓我們說一個新的狀態或視圖，我想用itm1顯示info

btn2 |相同

btn3 |同樣

我現在擁有的一切：

vinuri - 主頁

<section id="vinuri-wrapper" class="page"> 
<div class="cover"></div> 
<custom-header></custom-header>  
<main> 
    <section class="vinuri_left col-xs-4"> 
     <div ng-class="{active : activeMenu === 'alb'}" > 
      <a ui-sref=".alb" ng-click="activeMenu = 'alb'">alb</a> 
     </div> 
     <div ng-class="{active : activeMenu === 'rosu'}" > 
      <a ui-sref=".rosu" ng-click="activeMenu = 'rosu'">rosu</a> 
     </div> 
     <div ng-class="{active : activeMenu === 'rose'}" > 
      <a ui-sref=".rose" ng-click="activeMenu = 'rose'">rose</a> 
     </div> 
    </section> 
    <section class="vinuri_right col-xs-8"> 
     <div id="crame_section" ui-view="crame_section"></div> 
    </section> 
</main> 
<custom-footer></custom-footer> 
<section ui-view="wine_page"></section> 

vinuri.alb - 用戶界面視圖的第一級包括在crame_section

<v-accordion id="accordionAlb" class="vAccordion--default" control="accordionA" onexpand="expandCallback(index, id)" oncollapse="collapseCallback(index, id)"> 
<v-pane id="{{ ::item.crama }}" ng-repeat="item in content" expanded="item.isExpanded"> 
    <span class="big_sprite crame{{::pane.span}}" ng-click="showCramaDetails($event, item)"></span> 
    <v-pane-header id="{{ ::item.crama }}-header" aria-controls="{{ ::item.crama }}-content"> 
    <h5>{{ ::item.title }}</h5> 
    </v-pane-header> 

    <v-pane-content id="{{ ::item.crama }}-content" aria-labelledby="{{ ::item.crama }}-header"> 
    <div class="pan_row" ng-repeat="item_content in item.content"> 
     <div class="col-xs-12 item"> 
      <a ng-href="#/vinuri/{{type}}/{{::item_content.link}}">{{::item_content.name}}</a> 
     </div> 

    </div>   
    </v-pane-content> 
</v-pane> 

條

路線

.state('vinuri', { 
      url: '/vinuri', 
      //params: { lang: 'ro'}, 
      templateUrl: 'views/vinuri/vinuri.html', 
      controller: 'vinuriController', 
      resolve:{ 
         loadResources: ['$ocLazyLoad', function($ocLazyLoad) { 
           return $ocLazyLoad.load(['pageNavPropsService', 'vinuriCtrl' ,'customHeader', 'customFooter']); 
         }], 
         loadMyData: ['$stateParams', 'GetDataService', 'langService', function($stateParams, GetDataService, langService){ 
          var path = 'global/views/services/json/' + langService.getLang() + '_data.json'; 
          return GetDataService.getData(path); 
         }] 
      } 
     }) 
     // vin alb 
     .state('vinuri.alb', { 
      url: '/alb', 
      views: { 
       "crame_section" : { 
        templateUrl: 'views/vinuri/partial/vinuri.alb.html', 
        controller: ['$rootScope','$scope','loadMyContent', function($rootScope, $scope, loadMyContent){ 
         $scope.type="alb"; 
         $scope.content = loadMyContent; 
         //$rootScope.content = loadMyContent; 
        }], 
        resolve: { 
          loadMyContent: ['GetDataService', 'langService', function(GetDataService, langService){ 
           var content_path = 'views/vinuri/partial/vinuri_page/json/alb/' + langService.getLang() + '_data.json'; 
           return GetDataService.getData(content_path); 
          }] 
        } 
       } 
      } 
     }) 
     /*.state('vinuri.type.wine', { 
      url: '/:type/:id', 
      views: { 
       "crame_section@vinuri" : { 
        templateUrl: 'views/vinuri/partial/vinuri-details.html',     
        controller: function($scope, loadWinesDetails){ 
         $scope.wine = loadWinesDetails; 
        }, 
        resolve: { 
          loadWinesDetails: ['$stateParams', 'GetDataService', 'langService', 
          function($stateParams, GetDataService, langService){ 
           var content_path = 'views/vinuri/partial/vinuri_page/json/' + $stateParams.type + '/' + langService.getLang() + '_' + $stateParams.id + '.json'; 
           return GetDataService.getData(content_path); 
          }] 
        } 
       } 
      } 

     })*/ 
     .state('vinuri.alb.feteasca_alba', { 
      url: '/feteasca_alba', 
      views: { 
       "wine_page@vinuri" : { 
        templateUrl: 'views/vinuri/partial/vinuri-details.html',     
        controller: function($scope, loadWinesDetails){ 
         $scope.wine = loadWinesDetails; 
        }, 
        resolve: { 
          loadWinesDetails: ['$stateParams', 'GetDataService', 'langService', 
          function($stateParams, GetDataService, langService){ 
           var content_path = 'views/vinuri/partial/vinuri_page/json/' + $stateParams.type + '/' + langService.getLang() + '_' + $stateParams.id + '.json'; 
           return GetDataService.getData(content_path); 
          }] 
        } 
       } 
      } 

     }) 

的具體情況.state('vinuri.alb.feteasca_alba', { url: '/feteasca_alba',它的工作，但我要像.state('vinuri.type.wine', { url: '/:type/:id',的一般方法。

這怎麼能實現？

Answer 1

我解決這個問題是這樣的：

.state('vinuri.details', { 
      url: '/:type/:id', 
      views: { 
       "wine_page@vinuri": { 
        templateUrl: 'views/vinuri/partial/vinuri.details.html',                
        controller: ['$state', '$scope', 'loadWinesDetails' , 
         function($state, $scope, loadWinesDetails){ 
          $scope.wine = loadWinesDetails; 

          $scope.back = function(){ 
           $state.transitionTo("vinuri."+$state.params.type, { 
            reload: true, inherit: false, notify: true 
           }); 
          }; 
          $scope.home = function(){ 
           $state.transitionTo("home", { 
            reload: true, inherit: false, notify: true 
           }); 
          }; 
         }], 
        resolve: { 
          loadWinesDetails: ['$stateParams', 'GetDataService', 'langService', 
          function($stateParams, GetDataService, langService){ 
           var content_path = 'views/vinuri/partial/vinuri_data/' + $stateParams.type + '/' + $stateParams.id + '/' + langService.getLang() + '_' + $stateParams.id + '.json'; 
           return GetDataService.getData(content_path); 
          }] 
        } 
       } 
      } 
     })