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

Question

我正在使用 Kendo 带有 angular ng-repeat 和 ui-router 的标签条。现在标签条可以根据输入有不同的组合和不同数量的标签。在使用 angular ng-repeat 动态添加选项卡时，我可以为每个选项卡提供不同的 ui-sref 和 ui-view 名称。

<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-view 并且可以完美运行。为使该部分的视图名称动态化所做的更改不应影响应用程序的其他部分。我可以使用相对视图以任何方式实现这一目标吗？感谢大家的帮助。

另外，如果我使用 ng-repeat 动态地向 kendo-tab-strip 添加标签，我可以为标签条指定一个 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>

然后不知道，当单击特定选项卡时，如何告诉状态路由器应填充哪个视图。比如点击第三个tab时，对应的ui-view指定为ui-view="third"，当点击第四个tab时，对应的ui-view指定为ui-view="fourth" 等 on.How 在 ui-router?

中动态配置视图

非常感谢大家的帮助。

Answer 1

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

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

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

Answer 2

提供了更清洁的解决方案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

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

Dynamic view names based on the parameters returned while calling the state

kendo-ui

angularjs

angularjs-ng-repeat

angular-ui-router

kendo-tabstrip