Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/qt/6.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Angular JS自定义指令中的链接函数中未识别$http_Javascript_Angularjs_Angularjs Directive_Angularjs Scope - Fatal编程技术网

Javascript Angular JS自定义指令中的链接函数中未识别$http

Javascript Angular JS自定义指令中的链接函数中未识别$http,javascript,angularjs,angularjs-directive,angularjs-scope,Javascript,Angularjs,Angularjs Directive,Angularjs Scope,我想使用HighCharts渲染堆叠条形图 app.directive('testDirective', function() { var directive = {}; directive.restrict = 'EA', directive.controller = function($scope, $element, $attrs, $http) { populateData($scope, $element, $attrs, $http); }, direc

我想使用HighCharts渲染堆叠条形图

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,这应该在链接函数中完成

有人能解释一下如何在link函数中调用REST服务,然后绘制服务成功的图表吗


另外,如果有人能解释angular在这里提供双向数据绑定的好处。

但这不是问题,通过阅读文档,您可以了解到这一点:-这与双向数据绑定无关,但与良好的可读性和可维护性MVVM代码有关。@SergiuParaschiv我在git hub中得到了一个示例,该示例正用于此目的…该代码不以任何方式使用服务。问题是如何编写使用$http查询web服务的AngularJS服务?那么我如何在控制器中使用上述服务呢?那么,如何将服务调用的结果绑定到指令?。如果是这些问题,那么你应该阅读文档并尝试其中的示例。@SergiuParaschiv是的,我正在阅读文档并试图理解它。然而,自定义指令的作用域有点令人困惑。关于作用域有数百个问题。网上有数百篇关于他们的文章。还有文件: