如何確保在angularjs中承諾數據後返回

Question

我最近已經開始使用Ionic，它需要很好地掌握AngularJS，它有一些我還不明白的東西。

基本上，我有一個搜索字段，我綁定屬性formdata.searchText並在每次值更改時觸發搜索函數。回調是填充我的列表的藝術家的集合。

<input type="search" ng-model="formdata.searchText" placeholder="Search" 
ng-change="search()"> 

在我的控制器中，該屬性是定義的，在更改時調用方法搜索。搜索可以向工廠進行API調用。

.controller('SearchController', function($scope, SpotifyFactory) { 

$scope.formdata = [{ 
    searchText: "" 
    }]; 

$scope.search = function(){ 
    $scope.searchResults = SpotifyFactory.searchArtist($scope.formdata.searchText); 
    }; 
}) 

目前爲止效果很好。正在對Spotify API進行調用，並根據我的搜索詞返回找到的藝術家的結果。

我的數據：

當我CONSOLE.LOG的$ scope.searchResults在我的控制器，它包含了我的期望值。但是我相信會發生這種情況，因爲console.log在承諾完成後正在執行，這使得可以顯示數據。如果我CONSOLE.LOG對象在我的控制器，並說，例如

console.log($scope.searchResults.artists); 

它返回一個未定義的，而我還在能夠訪問的其他屬性。

下面是我如何在工廠進行API調用。

angular.module('starter.services', []) 

.factory('SpotifyFactory', function($http){   

    var foundArtists = function($searchTerm) { 

     var baseUrl = "https://api.spotify.com/v1/search?query=" + $searchTerm + "&type=artist&offset=0&limit=20"; 
     var searchResults = []; 

     searchResults.$promise = $http.get(baseUrl).then(function(response){ 
      angular.copy(response.data, searchResults); 
      return searchResults; 
     }); 

     return searchResults; 
    } 

    return { 
     searchArtist : foundArtists 
    } 
    } 
) 

我的問題是，我怎麼能保證得到的數據返回時，API的調用完成後。

Answer 1

使用一個承諾

.factory('SpotifyFactory', function($http){   

    var foundArtists = function ($searchTerm) { return new Promise(function(resolve, reject) { 

     var baseUrl = "https://api.spotify.com/v1/search?query=" + $searchTerm + "&type=artist&offset=0&limit=20"; 
     var searchResults = []; 

     searchResults.$promise = $http.get(baseUrl).then(function(response){ 
      angular.copy(response.data, searchResults); 
      resolve(searchResults); 
     }); 
    }}); 

    return { 
     searchArtist : foundArtists 
    } 
    } 

然後從那裏你想

SpotifyFactory.searchArtist('madonna').then((data) { 

$log.info('Data retrieved!', data); 
// do things you want to do after results are found 
}).catch(... error function);