Javascript 如何从服务中将数据检索到指令（angularjs）

我尝试从视图中获取数据，以使用指令绘制图形。但指令接收的是未定义的。下面是代码片段

View
<div linear-chart chart-data="dataset"></div>

service
myapp.factory('data', function($http) {
  var data = null;

  return function() {
    if (data) {
      return data;
    } else {
      data = $http.get('data/data.json');
      return data;
    }
  };
});

controller:
myapp.controller('ContactListCtrl', function ($scope, data) {

   data().success(function(dataSet) {
        $scope.dataset = dataSet;
   });

});

directive:
myapp.directive('linearChart', function($parse){
    return{
        restrict:'EA',
        template:"<svg></svg>",
        scope: {mydata: '=chartData'},
        link: function(scope, elem, attrs) {
            //var exp = $parse(attrs.chartData);
            var data = attrs.mydata;
            //var data = exp(scope);
            alert(data);   //not able to get the data here  (i get undefined here)
            var pathClass = "path";

            var padding = 20;
            var margin = {top: 20, right: 20, bottom: 20, left: 45},
                width = 1300 - margin.left - margin.right,
                height = 500 - margin.top - margin.bottom;

            var x = d3.scale.linear()
                .domain(d3.extent(data, function (d) {
                    return d.id;
                }))
                .range([0, width]);

            var y = d3.scale.linear()
                .domain(d3.extent(data, function (d) {
                    return d.frequency;
                }))
                .range([height, 0]);

            var line = d3.svg.line()
                .x(function (d) {
                    return x(d.id);
                })
                .y(function (d) {
                    return y(d.frequency);
                });

            var zoom = d3.behavior.zoom()
                .x(x)
                .y(y)
                .on("zoom", zoomed);


            var rawSvg=elem.find('svg');
            var svg = d3.select(rawSvg[0]);
            svg = d3.select(rawSvg[0])
                .attr('width', width + margin.left + margin.right)
                .attr('height', height + margin.top + margin.bottom)
                .call(zoom)
                .append("svg:g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            var make_x_axis = function () {
                return d3.svg.axis()
                    .scale(x)
                    .orient("bottom")
                    .ticks(data.length-1);
            };

            var make_y_axis = function () {
                return d3.svg.axis()
                    .scale(y)
                    .orient("left")
                    .ticks(5);
            };

            var xAxis = d3.svg.axis()
                .scale(x)
                .orient("bottom")
                .ticks(data.length-1);

            svg.append("svg:g")
                .attr("class", "x axis")
                .attr("transform", "translate(0, " + height + ")")
                .call(xAxis);

            var yAxis = d3.svg.axis()
                .scale(y)
                .orient("left")
                .ticks(5);

            svg.append("g")
                .attr("class", "y axis")
                .call(yAxis);

            svg.append("g")
                .attr("class", "x grid")
                .attr("transform", "translate(0," + height + ")")
                .call(make_x_axis()
                    .tickSize(-height, 0, 0)
                    .tickFormat(""));

            svg.append("g")
                .attr("class", "y grid")
                .call(make_y_axis()
                    .tickSize(-width, 0, 0)
                    .tickFormat(""));

            var clip = svg.append("svg:clipPath")
                .attr("id", "clip")
                .append("svg:rect")
                .attr("x", 0)
                .attr("y", 0)
                .attr("width", width)
                .attr("height", height);

            var chartBody = svg.append("g")
                .attr("clip-path", "url(#clip)");

            chartBody.append("svg:path")
                .datum(data)
                .attr("class", "line")
                .attr("d", line);

            svg.append("text")
                .attr("x", 700)
                .attr("y", 480)
                .style("text-anchor", "middle")
                .text("Time (ms)");


            svg.append("text")
                .attr("transform", "rotate(-90)")
                .attr("y", 6)
                .attr("dy", ".71em")
                .style("text-anchor", "end")
                .text("Frequency");

            function zoomed() {
                console.log(d3.event.translate);
                console.log(d3.event.scale);
                svg.select(".x.axis").call(xAxis);
                svg.select(".y.axis").call(yAxis);
                svg.select(".x.grid")
                    .call(make_x_axis()
                        .tickSize(-height, 0, 0)
                        .tickFormat(""));
                svg.select(".y.grid")
                    .call(make_y_axis()
                        .tickSize(-width, 0, 0)
                        .tickFormat(""));
                svg.select(".line")
                    .attr("class", "line")
                    .attr("d", line);
            }


        }
    };
});

谢谢，请帮助我，关于这一点，我尝试了所有可能的方法，但我没有得到图表。我得到的是svg，但不是图形。让我知道如何从视图接收数据。

---

再次感谢。

您的数据将显示在示波器上。试试这个：

var data = scope.mydata;

---

您需要在指令中的范围数据上添加$watch

$scope.$watch('mydata', function() {
    // call you chart data draw function here
}, true);

---

您不需要使用$parse“解析”属性，因为您使用双向数据绑定。它将在“范围”中提供。您可以在文档中阅读有关独立作用域的更多信息以及“=”、“&”和“@”的含义：

这是一个更新的plunkr，我在其中修复了很多东西。由于数据是异步接收的，因此需要$watch

---

根据需要更新getData以使其工作。

您能为此创建一个Fiddle或Plunk吗？不。在本地服务器上运行我的意思是可能在JSFIDLE或Plunk中创建一个示例，以便其他人更容易帮助调试正在发生的事情。这是指向JSFIDLE的链接谢谢您的Fiddle似乎设置不正确。请让它实际运行，显示您的错误。这样做比较容易。你试过我的新plunkr吗？您的问题已经解决了还是仍然需要帮助？谢谢您的回复。我看过你的代码，但我使用promise的方式有所不同。请回答你自己的问题，与社区共享你的代码，然后接受你的回答，使这个类似thxlike的scope.mydata.promise.thenfunctiondata{var data=data；console.logdata；}；我就是这样做的。所以我的数据在范围内。但是，给承诺一个目标并下定决心：错误。所以我这样做，而不是var data=attrs.mydata；var数据=扩展范围；警报数据；我将scope.mydata.$promise.thenfunctiondata{var data=data；console.logdata；}；