在自定义的service里面用$http获取本地的json文件的数据。请求能成功,但在controller里面拿不到数据。
打断点的时候,看到数据是空的。页面刷新完却有数据。是什么原因?
自定义service的代码:
blogModule.service('blogData', ['$http', '$q',
function ($http, $q) {
var service = {
returnedData: {},
dataLoaded: {},
getData: function (forceRefresh) {
var dfd = $q.defer();
if (!service.dataLoaded.genericData || forceRefresh) {
$http.get('../app/db.json')
.then(function success(data) {
angular.copy(data.data, service.returnedData);
service.dataLoaded.genericData = true;
dfd.resolve(service.returnedData);
})
} else {
dfd.resolve(service.returnedData);
}
return dfd.promise();
},
addSomeData: function (someDataToAdd) {
$http.post('../app/db.json', someDataToAdd)
.then(function success(data) {
service.getData(true);
})
}
};
service.getData();
return service;
}
]);
controller里面的代码:
blogModule.controller('blogController', ['$scope', '$routeParams', '$location', 'blogData',
function ($scope, $routeParams, $location, blogData) {
var getBlogData = blogData.returnedData;
var titles = $scope.titles = getBlogData.titles;
console.log(blogData);
console.log(titles);
}
]);
需要请求的json数据:
{
"titles": [
{
"title": "入门笔记",
"source": "_post/入门笔记.html",
"date": "201512",
"categories": [
"笔记",
"小事记"
],
"tags": [
"笔记",
"小事记"
]
},
{
"title": "入门笔记2",
"source": "_post/入门笔记2.html",
"date": "201512",
"categories": [
"基础",
"日常"
],
"tags": [
"基础",
"日常"
]
}
]
}
打断点是的console.log
页面重刷完之后是
为什么controller里面拿不到数据?是不是因为异步的原因?
非同期呼び出しの問題
service.getData()を実行した後
service.returnedDataの値がまだ空です~~~
また、service.getData() がサービス内で呼び出されるのはなぜですか?
他のモジュールがデータを必要としないときにデータをロードすることに何の意味があるのでしょうか?
1. サービスコードに記述したサービス名は requestData ですが、コントローラーに記述した名前は blogData です。これが理由かどうかはわかりません。
2. カスタム サービスで $http を使用する場合は、$http とその部分を分離し、コントローラー コード内で順番に呼び出す必要があります。
つまり、コントローラーは少なくとも次のように記述する必要があります:
requestData.getData().then(callback function)
コールバック関数部分をカスタムサービスにカプセル化することをお勧めします