Angularjs：无法迭代或从服务结果中获取结果

Question

guys 我是Angularjs的新手，这里是我的新单页面应用程序的一些代码。但我认为我做得不对。 这里是我的戈德：

var TownApp=angular.module('TownApp',['ngRoute','ngResource']); 

TownApp.service('Town', function($http) { 
    this.all = function() { 
     return $http.get('/database.json').then(function(response){ 
      return response.data; 
     }) 
    }; 
}); 

var HomeCtrl = TownApp.controller('HomeCtrl',function($scope,Town){ 
    $scope.towns = Town.all(); 
}); 
var TownCtrl = TownApp.controller('TownCtrl',function($scope, $routeParams, Town){ 
    console.log(Town.all().length) 
    $scope.towns = Town.all(); 
    console.log($scope.towns.length) 

    //........ 

}) 
TownApp.config(['$routeProvider', function($routes) { 

    $routes.when('/',{ 
    templateUrl : 'welcome.html', 
    controller : 'HomeCtrl' 
    }).when('/town/:townId',{ 
    templateUrl : 'town.html', 
    controller : 'TownCtrl' 
    }).otherwise({ 
    redirectTo : '/' 
    }); 

}]); 

所以，问题是，你可以看到这两个控制台日志在镇控制器，它们全部恢复“未定义”。所以我不能迭代或从Town.all()获取值。但它在HomeController上的工作非常完美。

我对服务和工厂都很满意。我想我只是以错误的方式去做？ 感谢您的帮助！

Answer 1

你的错误是，你试图以同步的方式从服务器中检索数据，这在角度上不起作用（在一般情况下也是如此）。

更改服务代码：

TownApp.service('Town', function($http) { 
    this.all = function() { 
     return $http.get('/database.json'); 
    }; 
}); 

，然后更改控制器代码：

TownApp.controller('HomeCtrl',function($scope,Town){ 
    Town.all().then(function(response)) { 
     $scope.towns = response.data; 
     console.log($scope.towns.length); 
    } 
} 

Answer 2

Town.all()返回一个承诺。承诺就像将来会有一段时间回归的价值。这不是直接的价值。这是一个可用于检索值的对象。

所以不是

$scope.towns = Town.all(); 

你需要：

Town.all() 
    .then(function(response){ 
     //if the promise we are dealing with is the promise that was directly 
     //returned from the $http call, then we need response.data 
     //if it was projected to hold `response.data` before (as in the initial question) 
     //then "response" here is already holding our data. 
     $scope.towns = response;  
    });