1

angular-uitabsを使用して、各タブをクリックするだけで、さまざまなコントローラーからさまざまな関数を呼び出そうとしていますdirective。

HTML

<tabset>
  <tab heading="Reports" ng-controller="ReportsController" ng-click="fetchReports()" id="tab1">
    <div> Reports </div>
  </tab>
  <tab heading="Sales" ng-controller="SalesController" ng-click="fetchSales()" id="tab2">
    <div> Sales </div>
  </tab>
</tabset>

このようなエラーが発生しています

新しい/分離されたスコープを求める複数のディレクティブ [ngController、tab]

要件

I have 5-6 tabs in a page. The page should not load the data of each tab at once. It should only load data for a tab once that tab is being clicked.

解決

tabsetディレクティブをラップして、それぞれのコントローラーから関数を呼び出すためのイベントparent controllerを取得できるようにするソリューションがあります。broadcastParentControllerChild

<div ng-controller='ParentController'>
  <tabset>
    <tab heading="Reports" id="tab1">
      <div ng-controller="ChildOneController"> Reports </div>
    </tab>
    <tab heading="Sales" id="tab2">
      <div ng-controller="ChildTwoController"> Sales </div>
    </tab>
  </tabset>
</div>

問題：

しかし、悲しいことに、私のアプリケーションにはタブを含むページが多すぎParentControllerますChildController。私はそれのための良い解決策が何であるかを知る必要がありますか?

4

2 に答える 2

1

あなたの場合、

ディレクティブを作成する必要があります:

このようにloopして、複数のコントローラーで複数のディレクティブを作成するために使用できます。

(function() {

    angular
      .module('app')
      .diretive('directiveTab', function() {
          return {
            restrict: 'AE',
            template: " <div> Reports </div>"//you can use templateUrl as well
            scope: {},
            controller: ['$scope',
              function($scope) {
                $scope.function1 = function(pane) {
                  
                };
              }
            ],
          };
        }
      })
the directive will behave like controller and you can manipulate the content of each tab

<div ng-controller='ParentController'>
  <tabset>
    <tab heading="Reports" id="tab1">
      <directive-tab>
    </tab>
  </tabset>
</div>

于 2016-06-27T20:56:58.733 に答える