Angularjs 使用HighCharts实现的图形在Angular JS中的双向数据绑定

我正在尝试用AngularJS为HighCharts编写一个指令，它支持双向数据绑定。在HTML中单击一个函数时，我试图用新数据加载图形

请检查下面的snipet

HTML:

更新功能

控制器：

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

angular.module（'myModule'，[]）
.directive（'hcAreaChart'，函数（）{
返回{
限制：'E'，
模板：“”，
范围：{
标题：“@”，
数据：'='
},
链接：功能（范围、元素）{
Highcharts.chart（元素[0]{
图表：{
类型：“区域”
},
标题：{
文本：空
},
xAxis：{
类别：[周一、周二、周三、周四、周五、周六、周日]
},
打印选项：{
起点：4，
},
系列：[{
showInLegend:false，
数据：scope.data
}]
});
}
};
})
.controller（'myController'，函数（$scope）{
$scope.areaData=[0,6,5,7,5,4.5,10]；
$scope.updateGraphData=函数（）{
日志（“内部更新功能”）；
$scope.areaData=[10,20,30,40,50,60,70]；
}
});

我想你应该试试这样的东西

      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

                    }]
                });

              })
            }

      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

                    }]
                });

              })
            }