基於調用狀態時返回的參數的動態視圖名稱

Question

我正在使用帶角度ng-repeat和ui-router的Kendo tabstrip。現在，根據輸入，tabstrip可以具有不同的組合和不同數量的選項卡。我可以爲每個選項卡提供不同的ui-sref和ui-view名稱，同時使用角度ng-repeat動態添加選項卡。

<div class="demo-section k-content"> 
    <div kendo-tab-strip="detailsTabStrip" k-ng-delay="Tabs"> 
    <ul> 
     <li ng-repeat="tab in Tabs" ng-class="getClass($first,tab)" ui-sref="{{tab.sref}}"> 
     {{tab.name}} 
     </li> 
    </ul> 

    <div ng-repeat="tab in Tabs" ui-view="{{tab.view}}"></div> 
    </div> 
</div> 

因此，這段代碼給出了每個標籤的個人ui-view。標籤中可能有150種不同類型的視圖。所以，我無法在路由器文件中硬編碼視圖名稱。我需要路由器接受視圖名稱的參數，或者至少在某種程度上我可以讓路由器知道用html填充哪個視圖。

$stateProvider 
    .state('details.tab', { 
     url:'/tab/:tabName', 
     views:{ 
      // the view name should be able to either read the state param and 
      // accordingly assign template or should at least be able to read the state 
      // and accordingly assign the template or if views can be a function. 
      "details.tabName": { 
       templateUrl: 'resources/pages/grid.html', 
       controller: 'gridController' 
      } 
     } 
    }); 

是否有可能以任何方式使視圖名稱爲動態。應用程序中還有其他部分具有絕對的ui視圖並且完美地工作。對此部分進行視圖名稱動態更改不應影響應用程序的其他部分。我能否以任何方式使用相對視圖來實現此目的？感謝所有的幫助。

此外，如果我使用ng-repeat動態添加標籤到kendo-tab-strip，我可以爲tabstrip指定單個ui-view =「details」。像所有選項卡狀態一樣，填充詳細信息視圖。

<div kendo-tab-strip="tabStrip"> 
    <ul> 
     <li ng-repeat="tab in Tabs" ng-class="getClass($first,tab)" ui-sref="{{tab.sref}}"> 
     {{tab.name}} 
     </li> 
    </ul> 

    <div ui-view="details"></div> 
    </div> 

如果我這樣做，所有的選項卡中加載了罰款，第一次，但如果我試圖深入瞭解的標籤，爲前：如果我試圖深入瞭解第五選項卡，然後爲第五個標籤加載內容很好，但沒有顯示。即使該選項卡顯示爲活動狀態（我使用ng-class作爲函數來決定哪個選項卡應該顯示爲活動狀態，方法是將k-state-active添加到適當的選項卡並添加它）。

如果我定義了不同的看法爲不同的分頁動態像下面，

<div kendo-tab-strip="detailsTabStrip" k-ng-delay="Tabs"> 
    <ul> 
     <li ng-repeat="tab in Tabs" ng-class="getClass($first,tab)" ui-sref="{{tab.sref}}"> 
     {{tab.name}} 
     </li> 
    </ul> 

    <div ng-repeat="tab in Tabs" ui-view="{{tab.view}}"></div> 
    </div> 

然後不知道，如何分辨點擊某個特定的標籤時認爲應填入路由器的狀態。就像點擊第三個選項卡時，指定的相應ui-view是ui-view =「third」，當單擊第四個選項卡時，指定的相應ui-view爲ui-view =「fourth」等等。如何配置在ui路由器中動態查看？

非常感謝所有的幫助。

Answer 1

製作一個公共視圖，在狀態提供者上使用該視圖名稱。

在該視圖包括如

<ng-include ng-src="'resources/pages' + tabname + '.html'" /> 

Answer 2

的清潔器溶液被提供here您desiered視圖：

app.js：

app.config(function ($locationProvider, $urlRouterProvider, $stateProvider) { 
    $urlRouterProviderRef = $urlRouterProvider; 

    $locationProvider.html5Mode(false); 
    $stateProviderRef = $stateProvider; 

}); 

app.run(['$q', '$rootScope', '$state', '$http', 
    function ($q, $rootScope, $state, $http) 
    { 
    $http.get("myJson.json") 
    .success(function(data) 
    { 
     angular.forEach(data, function (value, key) 
     { 
      var state = { 
      "url": value.url, 
      "parent" : value.parent, 
      "abstract": value.abstract, 
      "views": {} 
      }; 

      angular.forEach(value.views, function (view) 
      { 
      state.views[view.name] = { 
       templateUrl : view.templateUrl, 
      }; 
      }); 

      $stateProviderRef.state(value.name, state); 
     }); 
     $state.go("home");  
    }); 
}]); 

參考從AngularJS - UI-router - How to configure dynamic views