等待$ http.get調用完成

Question

我知道這與Promise有關，但我很難理解如何實現它們。

我的控制器：

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)}"> 

所以基本上我想要的星星圖標變成黃色，所有的貨架標有「最愛」。但main.isFavorite（）返回undefined我猜，因爲$ http.get方法尚未解決。所以我的問題是如何在這種情況下實現承諾？

Answer 1

首先，它不起作用，因爲您在isFavorite函數中有一個錯字：它不是main.favoriteIds，而是main.favoritesIds。

其次，它應該工作，不管承諾。在返回$http調用之前，您說的沒錯，main.favoritesIds是空的，但是當它被填充時，數組將被填充，並且將重新評估（由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]; 
};