基于调用状态时返回的参数的动态视图名称

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