角度uiタブの各タブをクリックすると、異なるコントローラから異なる機能を呼び出す方法はありますか？

Question

angular-uiタブ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、タブ]のようなエラーを取得しています

要件

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.

ソリューション

私は私がその後、ParentControllerからbroadcastのイベントは、それぞれのChildコントローラからの関数を呼び出すことができますようparent controllerでtabsetディレクティブをラップするためのソリューションを持っています。

<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に各タブのイベントを放送することは良いアイデアだと思ういけません。 私はそれに適した解決策を知る必要がありますか？

Answer 1

あなたは構文として、コントローラを使用することができます。ここでは

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

は、コントローラがどのように見えるかの例です：

(function(){ 

    angular 
    .module('app') 
    .controller('ReportsController', [ 
     ReportsController 
    ]); 

    function ReportsController() { 
    var vm = this; 

    vm.fetchReports = function() { 
     // fetch the reports! 
    }; 
    } 

})(); 

出典：ジョン・パパの角度スタイルガイドは、コントローラを使用することをお勧めします$ scope上の 構文として、style guideを参照してください。あなたのケースでは

Answer 2

、

あなたはdirective作成する必要があります：あなたが倍数に倍数コントローラと ディレクティブを作成するために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>