我的js代码是:
var Myapp =angular.module("Myapp",[]);
Myapp.service("Myservice",function($http,$scope){
this.userDate=function(){
return $http({
method:'GET',
url:'js/phone.json'
})
Myapp.controller("Myctrl",function($scope,Myservice){
console.log(Myservice.userDate().phone);
});
我的json文件是:
{
"phone": "1",
"verification": "1"
}
返回的结果是undefine 不知道为什么,我这里哪里有错吗,求大神解答
试试这个:
(function(){
angular.module("MyApp", [])
.service("MyService", MyService)
.controller("MyController", MyController)
MyService.$inject = ['$http'];
MyController.$inject = ['MyService'];
function MyService($http){
var service = {
getData: getData
}
return service;
function getData(url){
return $http.get(url)
.then(function(res){
return res;
})
}
}
function MyController(MyService){
var vm = this;
vm.getData = getData;
vm.url = "你的url地址";
vm.getData();
function getData(){
return MyService.getData(vm.url)
.then(function(res){
vm.data = res;
})
}
}
})()
浏览器控制器里看下请求返回的数据是什么
如果要是console.log(Myservice.userDate());
返回的值就是:
Service 写得没问题,但你的 Controller 有问题。
因为获取数据是从服务器请求而来,是异步的操作。你直接用 console.log
打印,是不行的,因为打印语句运行的时候,从服务器请求的结果还没有返回回来。所以,你得这样写:
Myapp.controller("Myctrl", function(
$scope, Myservice) {
Myservice.userDate().success(function(data){
console.log('data from phone.json:', data.phone);
}).error(function(err){
console.log('failed to get the data from server');
});
});
你老的代码就可以运行起来了。
不过,其实我并不建议你这样组织你的 Service 和 Controller,比较好的办法是在 Service 里用 $q 组织代码,如下:
Myapp.service("Myservice", function($http, $q) {
this.userDate = function() {
var defered = $q.defer();
$http({
method: 'GET',
url: 'js/phone.json'
}).success(function(data){
defered.resolve(data);
}).error(function(err){
defered.reject(err);
});
return defered.promise;
};
});
然后在 Controller 里直接对返回的 promise 进行操作,代码组织如下:
Myapp.controller("Myctrl", function(
$scope, Myservice) {
Myservice.userDate().then(
function(data){
console.log('data from phone.json:', data.phone);
},
function(err){
console.log('failed to get the data from server');
}
);
});
控制器的代码更简单,而 Service 可以更好的控制出错时的操作。