非同期アングルブーツラップUIの先行：選択ディレクティブの問題

Question

私のアプリケーションでは、自動完了のためにAngular-Bootstrap-UI-Typeahead機能が使用されています。

ユーザーが入力したように、私はAPI &を呼び出して同様の文字列を返すことができるようにしたいと考えています。

私は指導hereに従っていますが、すべての機能はすぐに使用できるGoogle APIで機能します。

自分のAPIで正常にスワップしました。APIを呼び出してデータを取得し、ブラウザのコンソールで正しい形式でログインできます。

しかし、私は常にテキストボックスから「結果が見つかりません」を取得します。 これはselectディレクティブに問題があると思われますが、私は困惑しています。

私はこれについてのガイダンスを高く評価します。ここで

はいくつかのコードです：

UI（content.html）

<h4>biz results</h4> 
<pre>Model: {{user.orgName | json}}</pre> 
<input type="text" 
ng-model="user.orgName" 
placeholder="Locations loaded via $http" 
uib-typeahead="obj for obj in getLocation($viewValue)" 
typeahead-loading="loadingBiz" 
typeahead-no-results="noBiz" class="form-control" 
typeahead-wait-ms="700"> 
<i ng-show="loadingBiz" class="glyphicon glyphicon-refresh"></i> 
<div ng-show="noBiz"> 
<i class="glyphicon glyphicon-remove"></i> No Results Found 
</div> 

角（script.js）

$scope.getLocation = function(val) { 
var bizRequest = $http.post('/sample', { 
    // var bizRequest = $http.post('/biz', { 
     orgName: val, 
     limit: 5 
    } 
).success(function(response){ 
    console.log(response) 
    //console.log('Biz response: ' + JSON.stringify(response)) 
    //console.log(response.data.fields.map(item)) 
    var bizArray = response.data.fields.map(function(item){ 
     return item.fields.orgName; 
    }); 
    console.log(bizArray); 
    return bizArray; 
    }); 
    console.log("Biz Request /////// " + JSON.stringify(bizRequest)) 
    return bizRequest 
}; 

ノードAPI（app.js）

app.post('/sample', function(req, res){ 

var resp = { 
"success": true, 
"data": { 
    "fields": [{ 
     "fields": { 
      "scid": "1111", 
      "orgName": "1111", 
      "countryCode": "1", 
      "countryName": "1", 
      "cityName": "1", 
      "addressLine": "1111" 
     }, 
     "matchedRule": { 
      "duplicateLevel": "POTENTIAL_MATCH", 
      "id": "18", 
      "rank": "1" 
     } 
    }, { 
     "fields": { 
      "scid": "2222", 
      "orgName": "2222", 
      "countryCode": "22", 
      "countryName": "22", 
      "cityName": "22", 
      "addressLine": "2 22" 
     }, 
     "matchedRule": { 
      "duplicateLevel": "POTENTIAL_MATCH", 
      "id": "18", 
      "rank": "1" 
     } 
    }] 
}, 
"errors": [], 
"warnings": [], 
"infoMessages": [] 
} 

res.send(JSON.stringify(resp)) 
}) 

Answer 1

を返す必要がありますからgetLocationメソッドを使用しています。だから約束を破ってしまう.successを使用しないでください。代わりにチェーンの約束にあなたを助ける.thenを使用すると、あなたは

$scope.getLocation = function(val) { 
    var bizRequest = $http.post('/sample', { 
    // var bizRequest = $http.post('/biz', { 
     orgName: val, 
     limit: 5 
    } 
).then(function(data){ 
    response = data.data; //<-- take data in response. 
    console.log(response.data) 
    //console.log('Biz response: ' + JSON.stringify(response)) 
    //console.log(response.data.fields.map(item)) 
    var bizArray = response.data.fields.map(function(item){ 
     return item.fields.orgName; 
    }); 
    console.log(bizArray); 
    return bizArray; 
    }); 
    console.log("Biz Request /////// " + JSON.stringify(bizRequest)) 
    return bizRequest 
};