Question

总之，我想这样做：

BTN1 |其中包含一个链接项列表：itm1，itm2，.. - ＆gt;现在，当我点击它时，让我们说一个新的状态或视图，我希望用itm1信息显示

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中包含的第一级ui-view

<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);
                           }]
                    }
                }
            }
        })

具有嵌套状态的Angular ui-router多视图

1 个答案: