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

我一直在开发一个移动应用程序，在那里我使用ChartJS。我被困在一个地方，我需要通过点击图标来绘制图表

问题是，图标位于template1.html，图表应该在template2.html处绘制。我正在使用angularJS。因此，每个图表都有其控制器

因此，图表的所有代码都在template2Controller中。问题来了，如何通过单击template1.html上的图标在template2.html上绘制图表

template1.html

template2.html

模板2控制器

$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
              }
      });

    });
  };

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

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

---

控制器之间是否存在任何关系？他们是父母/孩子吗？如果是这样，您可以使用

AngularJs

事件（

$emit，$broadcast

）

如果没有，您可能希望使用公共父祖先（如果没有，您可以使用rootScope`）在单击时触发事件，并使用$scope.$on侦听该事件并绘制图表。差不多

模板1 HTML

ng-click="drawChart()"

模板1控制器

$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
              }
      });

    });
  };

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

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

模板2控制器

$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
              }
      });

    });
  };

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

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

---

我认为，一个更好的方法是将

daily（）

函数移动到服务中，然后注入Template1Controller并从那里调用它。如果您在template2控制器中也需要它，您也可以将它注入其中。

但它不会在template2.html上呈现图表？我在template2.html中发送了图表id。带有事件的代码应该在template2.html中呈现。如果不是，我相信呈现的代码可能有问题，但如果使用调试器，您将看到控制器2中的代码被调用谢谢！你解决了我的问题！：）