为什么我的Angular取不到从json传来的值呢？

Question

我的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 不知道为什么，我这里哪里有错吗，求大神解答

Answer 1

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 可以更好的控制出错时的操作。

Answer 2

浏览器控制器里看下请求返回的数据是什么

Answer 3

试试这个：

(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;
            })
        }
    }
    
})()

Answer 4

如果要是console.log(Myservice.userDate());
返回的值就是：