我已经关注了url。这里我正在编写数据变量并在指令本身中分配数据。
但我在单独的sample.json文件中有json数据。然后如何将sample.json数据导入angular指令。任何人都可以帮我解决这个问题......
我的js:
angular.module('myApp').directive('multiLine', [
function() {
return {
restrict: 'E',
scope: {
data: '='
},
link: function(scope, element) {
var data = [
{
"City": "New York",
"Data": [
{
"Date": "20111001",
"Value": "63.4"
},
{
"Date": "20111002",
"Value": "58.0"
},
{
"Date": "20111003",
"Value": "53.3"
}
]
},
{
"City": "San Francisco",
"Data": [
{
"Date": "20111001",
"Value": "62.7"
},
{
"Date": "20111002",
"Value": "59.9"
},
{
"Date": "20111003",
"Value": "59.1"
}
]
},
{
"City": "Austin",
"Data": [
{
"Date": "20111001",
"Value": "72.2"
},
{
"Date": "20111002",
"Value": "67.7"
},
{
"Date": "20111003",
"Value": "69.4"
}
]
}
];
var margin = {
top: 20,
right: 80,
bottom: 30,
left: 50
},
width = 560 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function (d) {
return x(d.Date);
})
.y(function (d) {
return y(d.Value);
});
var svg = d3.select(element[0]).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
color.domain(data.map(function (d) { return d.City; }));
data.forEach(function (kv) {
kv.Data.forEach(function (d) {
d.Date = parseDate(d.Date);
});
});
var cities = data;
var minX = d3.min(data, function (kv) { return d3.min(kv.Data, function (d) { return d.Date; }) });
var maxX = d3.max(data, function (kv) { return d3.max(kv.Data, function (d) { return d.Date; }) });
var minY = d3.min(data, function (kv) { return d3.min(kv.Data, function (d) { return d.Value; }) });
var maxY = d3.max(data, function (kv) { return d3.max(kv.Data, function (d) { return d.Value; }) });
x.domain([minX, maxX]);
y.domain([minY, maxY]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (ºF)");
var city = svg.selectAll(".city")
.data(cities)
.enter().append("g")
.attr("class", "city");
city.append("path")
.attr("class", "line")
.attr("d", function (d) {
return line(d.Data);
})
.style("stroke", function (d) {
return color(d.City);
});
city.append("text")
.datum(function (d) {
return {
name: d.City,
date: d.Data[d.Data.length - 1].Date,
value: d.Data[d.Data.length - 1].Value
};
})
.attr("transform", function (d) {
return "translate(" + x(d.date) + "," + y(d.value) + ")";
})
.attr("x", 3)
.attr("dy", ".35em")
.text(function (d) {
return d.name;
});
}
};
}
]);
答案 0 :(得分:0)
您可以使用$http
。例如:
$http({method: 'GET', url:'path/to/file.json'})
.then(
function(json) {
console.log('result: ', json);
},
function(error) {
Console.warn('An error occured');
}
);
您也可以使用$http.get
作为便利功能。
答案 1 :(得分:0)
将$http
注入您的指令:
angular.module('myApp').directive('multiLine', ['$http', function($http) {
使用它的get
方法获取文件:
$http.get('file.json').then(
function resolved (response) {
console.info('Resolved at ' + new Date());
// response.data holds your JSON object
},
function rejected (response) {
console.error('Rejected at ' + new Date());
}
);
答案 2 :(得分:0)
如果要从其他文件获取JSON对象,可以使用http Get方法,如下所示:
app.controller("testController", function($scope, $http) {
$scope.data= [];
$http.get('data.json').success(function(data) {
$scope.data = data.value;
console.log(data.value);
});
});
点击此链接:https://docs.angularjs.org/api/ng/service/ $ http
答案 3 :(得分:0)
Here I created sample for how to get data from external json.
myApp.factory('Data', ['$http', function($http) {
var dataFactory = {};
dataFactory.getdata = function () {
return $http.get('your.json');
};
return dataFactory;
}]);
myApp.controller('FirstCtrl', function( $scope, Data ){
Data.getdata().then(function (data) {
$scope.Data = data.data;
});
});