等待 $http.get 调用完成

Question

我知道这与承诺有关，但我很难理解如何实现它们。

我的控制器：

angular.module('landingApp')
  .controller('MainCtrl', function($http, $q){
    var main = this;

    main.favoritesIds = [];

    $http.get('api/v1/planograms/get_favorites')
      .success(function(data){
        for(var i=0; i < data.planograms.length; i++)
          main.favoritesIds.push(data.planograms[i].id);
      });

    main.isFavorite = function(planogram_id){
      return main.favoriteIds.indexOf(planogram_id) > -1;
    };

然后在我的模板中使用 isFavorite()，如下所示：

<div class="col-md-6" ng-repeat="planogram in main.planograms">
  <i class="fa fa-star fa-2x favorite" ng-class="{'yellow' : main.isFavorite(planogram.id)}">

所以基本上我希望所有标记为 'favorite' 的货架图的星形图标都变成黄色。但是 main.isFavorite() returns undefined 我猜是因为 $http.get 方法还没有解析。所以我的问题是在这种情况下我将如何实现承诺？

Answer 1

首先，它不起作用，因为你在 isFavorite 函数中有一个错字：它不是 main.favoriteIds，而是 main.favoritesIds.

其次，无论承诺如何，它都应该有效。你是对的，在返回 $http 调用之前，main.favoritesIds 是空的，但是当它被填充时，数组被填充，并且 isFavorite 函数（被 Angular) 重新评估。

虽然您的代码在错字修正后可以正常工作，但它并不是最佳的。监视函数在每个摘要周期被调用，并且应该非常快，而你的 isFavorite 确实 isIndexOf，具有 O(n) 复杂性。

不是创建 favoritesIds 的数组，而是创建一个对象，这样您就可以执行 O(1) 查找。或者，更好的是，用最喜欢的数据扩充 planograms 数组。

例如，以favoritesIds为对象：

 $http.get('api/v1/planograms/get_favorites')
    .success(function(data){
        for(var i=0; i < data.planograms.length; i++) {
          main.favoritesIds[data.planograms[i].id] = true;
        }
    });

 main.isFavorite = function(planogram_id){
   return main.favoritesIds[planogram_id];
 };

等待 $http.get 调用完成

waiting for $http.get call to complete

angularjs

angular-promise