我有一个工厂,它从数组加载数据,或者从这个数组中加载一个选定的元素。但是,如果我将它移动到外部.json文件,我只是得到错误 - 我是新手角色,但努力,记住^^ 所以,如果我使用简单的
$http.get('ports.json').success (function(data){
var works = data;
});
代码,我得到“ReferenceError:工作未定义”。如果我尝试
$http.get('ports.json').then((portRes){
var works = res.data;
});
我收到“Uncaught SyntaxError:Unexpected token {”错误。但是那个代码不是工厂,在一个完全不同的页面上工作,所以不知道现在可能出现什么问题:/ 这是.json文件,@链接,你可以检查plunker。 Plunker - http://plnkr.co/edit/tMrJMjzc4pl7fQ1PIEiO?p=info
[
{
"Title": "Sprite",
"subTitle": "",
"Link": "sprite",
"Thumbnail": "img/portfolio02.png",
"Image": "img/ismont.png"
},
{
"Title": "Pepsi",
"subTitle": "Kristályvíz",
"Link": "pepsi",
"Thumbnail": "img/portfolio03.png",
"Image": "img/sanofimont.png"
}
]
编辑:所以我尝试了你所写的所有内容,但似乎没有任何工作......
所以我现在有一个很好的工作因素,我想转移到外部.json文件,非常清楚明白。
portApp.factory("workFactory", function($http) {
var works = [
{
Title: "Sprite",
subTitle: "",
Link: "sprite",
Thumbnail: "img/portfolio02.png",
Image: "img/ismont.png"
},
{
Title: "Pepsi",
subTitle: "Kristályvíz",
Link: "pepsi",
Thumbnail: "img/portfolio03.png",
Image: "img/sanofimont.png"
}
];
return {
list: function() {
return works;
},
selected: function(detPath) {
selected = works.filter(function(work) {
return work.Link == detPath;
});
return selected;
}
};
答案 0 :(得分:5)
你发布的Plunker有很多问题。
但主要问题在于此代码:
portApp.factory("workFactory", function($http) {
$http.get('ports.json').then((portRes) {
var works = res.data;
});
return {
list: function() {
return works;
},
selected: function(detPath) {
selected = works.filter(function(work) {
return work.Link == detPath;
});
return selected;
}
};
});
问题:
1. then
方法需要一个函数。将(portRes)
更改为function(portRes)
。
2.执行var works = res.data
在回调函数内创建一个局部var。你不能在外面访问它。另外,将res
更改为portRes
。
3.返回works
var在技术上不会起作用,因为它是一个不在同一范围内的局部变量。它不会在逻辑上工作,因为$http.get
是一个异步过程,你不知道它什么时候结束。
修改:
在你编辑之后,我相信你需要这样的东西(我没有检查这个,所以可能有一些错误,但这是做事的方式):
portApp.factory("workFactory", function($http) {
var state = {
works: null,
list: function() {
return this.works;
},
selected: function(detPath) {
return this.works.filter(function(work) {
return work.Link == detPath;
});
}
};
$http.get('myJson.json').success(function(data) {
state.works = data;
});
return state;
}
答案 1 :(得分:0)
您可以使用角度资源:
angular.module('portApp').factory('Port', function ($resource) {
return $resource('ports.json');
});
答案 2 :(得分:0)
来自另一个Stack Overflow线程:
theApp.factory('mainInfo', function($http) {
var obj = {content:null};
$http.get('content.json').success(function(data) {
// you can do some processing here
obj.content = data;
});
return obj;
});
你可以在这里看到它:
AngularJS: factory $http.get JSON file
答案 3 :(得分:0)
您忘记了function
中的$http.get
关键字以及错误的变量名称
$http.get('ports.json').then(function(res) { // <--- THIS
var works = res.data;
});