Liaison de données bidirectionnelle dans Angular JS pour les graphes implémentés en utilisant HighCharts

Question

J'essaye d'écrire une directive pour HighCharts dans AngularJS qui supporte la liaison de données bidirectionnelle. Au clic d'une fonction dans le HTML, j'essaie de charger le graphique avec de nouvelles données.

S'il vous plaît vérifier le snipet ci-dessous.

HTML:

<hc-area-chart data="areaData"></hc-area-chart> 
<button ng-click="updateGraph()">Update function</button> 

Controller:

angular.module('myModule', []) 
     .directive('hcAreaChart', function() { 
      return { 
       restrict: 'E', 
       template: '<div></div>', 
       scope: { 
        title: '@', 
        data: '=' 
       }, 
       link: function (scope, element) { 
        Highcharts.chart(element[0], { 
         chart: { 
          type: 'area' 
         }, 
         title: { 
          text: null 
         }, 
         xAxis: { 
          categories: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'] 
         }, 

         plotOptions: { 
          pointStart: 4, 
         }, 
         series: [{ 
          showInLegend: false, 
          data: scope.data 

         }] 
        }); 
       } 
      }; 
     }) 
     .controller('myController', function ($scope) { 
      $scope.areaData = [0,6,5,7,5,4.5,10]; 

      $scope.updateGraphData = function() { 
       console.log("inside update function"); 
       $scope.areaData = [10,20,30,40,50,60,70]; 
      } 
     }); 

Answer 1

Je pense que vous devriez essayer quelque chose comme ça

 link: function (scope, element) { 

      scope.$watch('data', function(){ 

       Highcharts.chart(element[0], { 
        chart: { 
         type: 'area' 
        }, 
        title: { 
         text: null 
        }, 
        xAxis: { 
         categories: ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'] 
        }, 

        plotOptions: { 
         pointStart: 4, 
        }, 
        series: [{ 
         showInLegend: false, 
         data: scope.data 

        }] 
       }); 

       }) 
      }