angularjs＆highcharts - 在指令设置属性

Question

我现在有这个作为我的指令：

app.directive('highchart', function() { 
    return { 
    restrict: 'E', 
    template: '<div></div>', 
    replace: true, 
    link: function(scope, element, attrs) { 
     scope.$watch(function() { return attrs.chart; }, function() { 
      if (!attrs.chart) return; 
      var chart = JSON.parse(attrs.chart); 
      $(element[0]).highcharts(chart); 
     }); 
    } 
}; 

}）

这是我的控制器：

function ProdSvcViewsCtrl($scope, $routeParams, $http, $location) { 
$scope.example_chart = get_chart(); 

function get_chart() { 
    return { 
     xAxis: { 
      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
     }, 

     plotOptions: { 
      series: { 
       name: 'Page Views', 
       color:'#FFFFFF', 
       cursor: 'pointer', 
       point: { 
        events: { 
         click: function() { 
          alert('Category: ' + this.category + ', value: ' + this.y); 
         } 
        } 
       }, 
      } 
     }, 

     chart: { 
      renderTo: 'container', 
      backgroundColor : { 
       linearGradient : [0, 0, 0, 400], 
       stops : [ 
        [0, 'rgb(100, 100, 100)'], 
        [1, 'rgb(50, 50, 50)'] 
       ] 
      }, 
      plotBackgroundColor: 'rgba(255, 255, 255, 0.1)', 
      width: 775, 
      height: 300, 
     }, 
     title: { 
      text: "Product Page Views", 
      align: "center", 
      y: 15, 
      style: { 
       color: "#ffffff", 
       fontSize: "18px", 
       fontWeight: 500, 
       fontFamily:'Calibri,Helvetica,Arial' 
      } 
     }, 
     legend: { 
      backgroundColor: 'transparent', 
      color:'#FFFFFF', 
      layout: 'horizontal', 
      floating: true, 
      align: 'left', 
      verticalAlign: 'top', 
      x: 60, 
      y: 1, 
      shadow: false, 
      border: 0, 
      borderRadius: 0, 
      borderWidth: 0 
     }, 

     series: [{ 
      data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4] 
     }] 
    }; 
} 

}

如何将属性迁移到来自我的控制器的指令中，以便它们可以是动态的，具体取决于我应用于相应指令的属性，即颜色，宽度等？

Answer 1

在您的指令中，您可以将手表添加到想要成为动态的图表部分。

这是采取这个指令的方法：https://github.com/pablojim/highcharts-ng