最初のテンプレートのアイコンをクリックして2番目のテンプレートのグラフをレンダリングします

Question

私はチャートJSを使用するモバイルアプリケーションで作業しています。私はアイコンをクリックしてグラフを描く必要がある1つの場所にくっついています。

問題はアイコンがtemplate1.htmlにあり、グラフがtemplate2.htmlに描画されていることです。私はangularJSを使用しています。したがって、各チャートにはそのコントローラがあります。

したがって、チャートのすべてのコードはtemplate2Controllerにあります。質問は、template1.htmlのアイコンをクリックして、template2.htmlにグラフを描画する方法を示します。

template1.html

<button class="" ng-click="daily()"> </button>

template2.html

<div id="dailyTab" class="chart" > <canvas id="dailyChart" ></canvas> </div>

template2Controller

$scope.daily = function() { 
    $http.get('jsonAPIURL' 
).success(function(response) { 

     var dailyCoffee = []; 
     angular.forEach(response, function(value, key) { 
     dailyCoffee.push(value.Currency); 
     }); 

     var daily = { 
     labels: ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'], 
     datasets: [{ 
     backgroundColor: "rgb(3,191,179)", 
      data: dailyCoffee 
     }] 
     }; 
     var ctx = document.getElementById('dailyChart').getContext('2d'); 

     var chartDaily = new Chart(ctx, { 
     type: 'bar', 
     data: daily, 
     options: { 
      responsive: true 
       } 
     }); 

    }); 
    }; 

Answer 1

コントローラ間に関連がありますか？彼らは親子ですか？もしそうなら、AngularJsイベント（$emit, $broadcast）を使うことができます。

もしそうでなければ、共通の親祖先（rootscope`を使用することができない場合）をクリックしてイベントを起動し、$ scope。$ onを使用してそのイベントを聴くことができます。グラフを描画します。

Template1をHTMLのようなもの

ng-click="drawChart()" 

Template1をコントローラー

$scope.drawChart = function(){ 
     // $root scope must be injected in the controller. Use the name you prefer 
     $rootScope.$broadcast('draw-custom-chart'); 
}; 

Template2Controller

$scope.$on('draw-custom-chart', function($event){ 
    $event.stopPropagation(); 
    $scope.daily(); 
}); 

もっと良い方法は、とにかく、daily()関数をサービスに移動し、Template1Controllerに挿入し、そこから呼び出すことです。 Template2Controllerでも必要な場合は、そこにも注入することができます。