在Angular JS中使用HighCharts實現的圖形的雙向數據綁定

Question

我想在支持雙向數據綁定的AngularJS中爲HighCharts編寫指令。點擊HTML中的一個函數，試圖用新數據加載圖形。

請檢查下面的snipet。

HTML：

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

控制器：

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

我想你應該嘗試這樣

 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 

        }] 
       }); 

       }) 
      }