0

我正在使用带有角度 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-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，我可以为 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中动态查看？

非常感谢所有的帮助。

4

2 回答 2

2

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

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

<ng-include ng-src="'resources/pages' + tabname + '.html'" />
于 2015-11-19T18:35:16.520 回答
1

这里提供了一个更清洁的解决方案：

应用程序.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 - 如何配置动态视图的参考

于 2015-11-19T20:31:29.863 回答