Question

我有2个问题。我正在做的是要求邮政编码，使用API获取该邮政编码的纬度和经度，然后使用该纬度和经度使用英国警察API在该位置附近的特定日期获取所有街道级别的犯罪。问题是ng-repeat不起作用我猜这是因为当页面加载时，$ http请求仍然没有收到任何回复，因为如果我控制台日志它返回undefined然后在那之后使用setTimeout两秒钟它返回我需要的东西。

这是我的代码：

function PostCodeCtrl($scope, Server, $location, $routeParams){

this.postcode = $routeParams.postcode;

if(this.postcode){
    this.title = "dasdasd";
    this.crimes = undefined;

    Server.get("http://api.postcodes.io/postcodes/" + this.postcode)
        .then(function(response){

        this.response = response.data;

        if(response.data.status === 200){

            Server.get('http://data.police.uk/api/crimes-street/all-crime?lat='+ 
                        this.response.result.latitude +
                        '&lng='+
                        this.response.result.longitude+
                        '&date=2013-01').then(function(response){

                this.crimes = response.data;

            });

        }

    });

    console.log(this.crimes); //returns undefined
    setTimeout(function(){
        console.log(this.crimes); //returns JSON object
    }, 2000);
}else{

    $location.path('/');

}

}

<ul>
    <li ng-repeat="crime in postcode.crimes">
        {{crime.category}}
    </li>
</ul>

我也不明白承诺的重点，在youtube上观看至少5个截屏和演示后，他们都说承诺有助于摆脱金字塔代码，也就是这样：

(function($) {
  $(function(){
    $("button").click(function(e) {
      $.get("/test.json", function(data, textStatus, jqXHR) {
        $(".list").each(function() {
          $(this).click(function(e) {
            setTimeout(function() {
              alert("Hello World!");
            }, 1000);
          });
        });
      });
    });
  });
})(jQuery);

但是我没有看到它帮助你仍然必须在我的第一个例子中嵌入事物，它仍然创建金字塔结构。

Answer 1

这里有两个问题，所以让我们分解一下。

如何在ng-repeat

中加载异步数据

鉴于以下内容：

<div ng-repeat="item in items">
  {{item.title}}
</div>

如果$scope.items被异步设置，那么ng-repeat将不会呈现任何内容，直到您将$scope.items设置为某个数组 - 然后Angular会检测到更改并更新视图：

$http.get("data.json").then(function(response){
   $scope.items = response.data; // data is the array of items
});

console.log($scope.items); // undefined, since $http has not yet received the reponse

如何在没有＆＃34;回调地狱的情况下连结承诺＆＃34;

Promise是可链的 - 每个.then处理程序将数据或数据的另一个承诺返回给该行中的下一个人：

$http.get("/someService")
  .then(function(response){
     var data = response.data;
     return // important!
       $http.get("/someOtherService", { d: data });
  })
  .then(function(response){
    var data2 = response.data;

    // do something

    return finalData;
  };

你可以看到它是如何链的。如果你把所有这些都放在你的服务中：

.factory("Svc", function($http){
    getFinalData: function(){
       return $http.get("/someService")
         // etc.. (as above)
    }
})

然后在控制器中，您可以这样做：

.controller("MainCtrl", function(Svc){
   Svc.getFinalData().then(function(data){
     $scope.items = data; // could be used with ng-repeat
   });
});

Angular JS承诺和ng-repeat

1 个答案: