0

angular ng-repeat と ui-router で Kendo タブストリップを使用しています。タブストリップは、入力に基づいて異なる組み合わせと異なる数のタブを持つことができます。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-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="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>

これを行うと、最初はすべてのタブが正常にロードされますが、タブを深く掘り下げようとすると、たとえば、5 番目のタブを深く掘り下げようとすると、5 番目のタブのコンテンツは正常にロードされますが、表示されません。タブがアクティブとして表示されていても (追加時に k-state-active を適切なタブに送信することで、どのタブをアクティブに表示するかを決定する関数として ng-class を使用しています)。

以下のように、異なるタブに異なるビューを動的に定義すると、

<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>

次に、特定のタブがクリックされたときにどのビューを設定する必要があるかを状態ルーターに伝える方法を知りません。同様に、3 番目のタブがクリックされたとき、指定された対応する ui-view は ui-view="third" であり、4 番目のタブがクリックされたとき、指定された対応する ui-view は ui-view="fourth" などです。 ui-router で動的に表示しますか?

すべての助けをありがとう。

4

2 に答える 2

1

よりクリーンなソリューションがここに提供されています：

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 - 動的ビューの構成方法

于 2015-11-19T20:31:29.863 に答える