ブートストラップでの非同期要求

Question

私はサーバ側でユーザが入力した名前を検索しようとしていますが、ブートストラップ3 uib-typeaheadを使用して提案しています（ただし、タイプアヘッドのドロップダウンに戻り値はありません。私の推測では、これは非同期要求であるため、要求データが取得されるまでにすべてのデータがすでに返されているということです。

typeaheadがリッスンしている間に、サーバー側からデータを取得する方法はありますか。

は

$scope.test_search = function(test_name){ 
    var curr_url = '/plan/ajax/test/'; 

    var search_response = $http.get(curr_url,{ 
     cache: true, 
     params:{'name': test_name, 'csrfmiddlewaretoken': $cookies.csrftoken} 
    }).then(function successCallback(response) { 
     console.log(response.data); 
     //return response.data; 
     var test = [ 
      {country: "US", name : 'Alabama'} 
     ]; 
     return test; 

    }, function errorCallback(response) { 
     alert('Error'); 
    }); 

}, 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div class="col-lg-6"> 
    <pre>Model: {{new_ingredient_selected | json}}</pre> 
    <input type="text" 
      ng-model = "new_ingredient_selected" 
      placeholder="test test" 
      uib-typeahead="ingredient.name for ingredient in test_search($viewValue) | filter:{name:$viewValue}" 
      typeahead-loading="loadingLocations" 
      typeahead-no-results="noResults" 
      typeahead-on-select="onTypeaheadIngredientSelect($item, $label, $index)" 
      typeahead-wait-ms ="400" 
      class="form-control"> 

    <i ng-show="loadingLocations" class="glyphicon glyphicon-refresh"></i> 
    <div ng-show="noResults"> 
     <i class="glyphicon glyphicon-remove"></i> No Results Found 
    </div> 
</div> 

Answer 1

test_search機能はreturn文を必要とします。

$scope.test_search = function(test_name){ 
    var curr_url = '/plan/ajax/test/'; 

    var search_response = $http.get(curr_url,{ 
     cache: true, 
     params:{'name': test_name, 'csrfmiddlewaretoken': $cookies.csrftoken} 
    }).then(function successCallback(response) { 
     console.log(response.data); 
     //return response.data; 
     var test = [ 
      {country: "US", name : 'Alabama'} 
     ]; 
     return test; 

    }, function errorCallback(response) { 
     alert('Error'); 
     //IMPORTANT 
     //RE-THROW the error 
     ͟t͟h͟r͟o͟w͟ ͟r͟e͟s͟p͟o͟n͟s͟e͟;͟ 
    }); 

    //IMPORTANT 
    //RETURN the promise 
    ͟ ͟r͟e͟t͟u͟r͟n͟ ͟s͟e͟a͟r͟c͟h͟_͟r͟e͟s͟p͟o͟n͟s͟e͟;͟ 

}; 

機能がreturn声明を欠い、それはundefinedの値を返します。

また、拒否ハンドラのエラー応答はre-throwであることが重要です。さもなければ、拒否された約束はでに変換され、約束された約束はundefinedに解決されます。