Question

我正在使用带有角度ng-repeat和ui-router的Kendo标签。现在，tabtrip可以根据输入具有不同的组合和不同数量的选项卡。我能够为每个选项卡提供不同的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-view定义并且工作正常。为使该部分的视图名称动态化所做的更改不应影响应用程序的其他部分。我可以使用相对视图以任何方式实现此目的吗？感谢您的帮助。

另外，如果我使用ng-repeat动态地向kendo-tab-strip添加标签，我可以指定单个ui-view =＆＃34;详细信息＆＃34;对于tabstrip。与所有选项卡状态一样，填充详细信息视图。

<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视图为ui-view =＆＃34;第三个＆＃34;，当单击第四个选项卡时，指定的相应ui视图为ui-view =＆＃34;第四个＆＃ 34;如何在ui-router中动态配置视图？

非常感谢所有的帮助。

Answer 1

制作一个公共视图，在您的州提供商处使用该视图名称。

在该视图中包含您的desiered视图

<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

的参考资料

动态视图名称基于调用状态

2 个答案: