Angular JS Custom Directive中的链接函数无法识别$ http

时间:2015-02-09 09:17:08

标签: javascript angularjs angularjs-directive angularjs-scope

我想使用HighCharts渲染Stacked Bar Charts。

app.directive('testDirective', function() {
  var directive = {};

  directive.restrict = 'EA',
  directive.controller = function($scope, $element, $attrs, $http) {
    populateData($scope, $element, $attrs, $http);
  },
  directive.template = '<div id="container" style="margin: 0 auto ;min-width: 310px; max-width: 800px; height: 400px;">working</div>',
  directive.link = function($scope, $element, $attrs) {
  };

  return directive;
});


function populateData(scope, element, attrs, http) {
  var request = http.get("json/HighCharts.json");
  scope.seriesData = {};
  request.success(function(data, status) {
    scope.seriesData = data;
    plotChart(scope, element, attrs);
  });
}

function plotChart(scope, element, attrs) {
  var chart = new Highcharts.Chart({
    chart : {
      renderTo : scope.seriesData.id,
      type : scope.seriesData.chart.type,
      events : {
        click : function(e) {
          console.log('Chart clicked');
        }
      }
    },
    title : {
      text : scope.seriesData.title.text
    },
    xAxis : {
      categories : scope.seriesData.xAxis.categories
    },
    yAxis : {
      min : 0,
      title : {
        text : scope.seriesData.yAxis.title.text
      }
    },
    legend : {
      reversed : true
    },
    plotOptions : {
      series : {
        stacking : scope.seriesData.plotOptions.series,
        point : {
          events : {
            click : function() {
              alert('Category: ' + this.category + ' ' + this.x + ' ' + this.y);
            }
          }
        }
      },
    },
    series : scope.seriesData.series
  });
}

我面临的问题是我在控制器功能中操作DOM,这应该在链接功能中完成。

有人可以解释如何在链接功能中调用REST服务,然后在服务成功上绘制图表。

此外,如果有人可以请说明角度提供的好处(双向数据绑定)。

0 个答案:

没有答案