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

Question

我正在使用带有角度 ng-repeat 和 ui-router 的 Kendo 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 视图。选项卡中可能有 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-router 中动态查看？

非常感谢大家的帮助。

Answer 1

提供更清洁的解决方案here:

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的参考

Answer 2

创建一个通用视图，在您的状态提供程序上使用该视图名称。

在该视图中包含您想要的视图

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