Question

我一直致力于移动应用程序，我使用图表JS。我被困在一个需要通过点击图标绘制图表的地方。

问题是，图标位于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 Controller

$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 ，你也可以在那里注入它。

通过单击第一个模板上的图标在第二个模板上呈现图表

1 个答案: