如何从服务中将数据检索到指令(angularjs)中
How to retrive data into directive (angularjs) from service
我尝试从视图中获取数据,以使用指令绘制图形。但是接收未定义的指令。以下是代码片段。
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,但没有得到图形。让我知道如何从视图接收数据。再次感谢。
您不需要使用$parse
"解析"属性,因为您使用双向数据绑定。它将在"作用域"中可用。您可以在文档中阅读更多关于孤立作用域的信息,以及'=','&'的含义和"@":https://docs.angularjs.org/guide/directive
这是一个更新的plunkr,我在其中修复了很多东西。由于数据是异步接收的,因此需要$watch
。
http://plnkr.co/edit/1SLHyNMiOw1swRmXYRI4
相应地更新getData()
,使其根据需要工作。
您的数据将在作用域中。试试这个:
var data = scope.mydata;
您需要在指令中的作用域数据上添加$watch。
$scope.$watch('mydata', function() {
// call you chart data draw function here
}, true);
相关文章:
- 一次显示一个隐藏指令-AngularJS
- 一次显示一个指令AngularJS
- 在同一页面上多次使用的自定义指令 (AngularJS) 中的验证
- 无法绑定到没有指令 + angularjs 标识符的控制器
- 值未传递给指令-AngularJS
- 测试依赖于另一个指令Angularjs的指令
- 根据指令angularjs 1.2分配控制器
- 有模板问题的指令.AngularJS
- 编译指令在指令 AngularJS 中
- 我可以将 templateUrl 传递给指令 - AngularJS
- 从子指令的父指令 [angularJS] 触发子指令中的函数
- 将服务注入指令 AngularJS 和数据绑定
- 在指令 AngularJS 中解析
- 从指令 AngularJS 给出高图表正确的参数
- 获取 JSON 数据并传递给指令 Angularjs
- 点击事件后的渲染模板指令 - AngularJs
- 如何从分页指令angularjs隐藏直接页面链接
- AngularJS-关闭tile并从ngRepeat指令AngularJS中的模型加载新视图
- 触发指令AngularJs的控制器作用域
- 将定义的对象传递给另一个自定义指令angularjs