javascript - 为什么我的Angular取不到从json传来的值呢?
大家讲道理
大家讲道理 2017-04-10 15:44:16
[JavaScript讨论组]

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

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(4)
巴扎黑

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

ringa_lee

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

迷茫

试试这个:

(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;
            })
        }
    }
    
})()
PHP中文网

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号