typhead не заселять угловую щ

Question

• Угловое 1.5.8
• Bootstrap 3.3.7 (CSS)
• радиально-щ 2.0.2

Использование угловой машинописный (ui.bootstrap.typeahead) требует список объектов который будет отображаться в компоненте пользовательского интерфейса с HTML

Проблема

1. Возвращаясь promise от службы к компоненту (контроллера 1,5 стиля, вид, переплеты)

функция

2. контроллера использует возвращенный promise от службы и выполняет then логики и возвращает array объектов

3. Typeahead не обрабатывает массив ... выполняя консольный журнал, вы можете увидеть массив.

4. Если я статический пройти один и тот же массив объектов без с использованием методы сервиса, то функция работает

HTML

  <input type="text" ng-model="$ctrl.search.term" ng-disabled="!$ctrl.search.type" 
        typeahead-wait-ms="600" 
        placeholder="Search..." 
        uib-typeahead="res as res.name for res in $ctrl.submit($viewValue)" 
        typeahead-no-results="noResults" class="form-control" required> 
      <i ng-show="loadingLocations" class="icon ion-refresh"></i> 

      <div ng-show="noResults"> 
       <i class="icon ion-close"></i> No Results Found 
      </div> 

      <select class="form-control custom-select-md" 
        ng-model="$ctrl.search.type" 
        placeholder="Type" 
        required> 
       <option value="" disabled selected>Select Type?</option> 
       <option value="car">car</option> 
       <option value="van">van</option> 
      </select> 

компоненты (контроллер, вид)

//submit search for issuers or issuedCard 
submit() { 
    this.isSubmitting = true; 

    this._SearchService.performSearch(this.search) 
    .then(
     (resp) => { 
      //e.g. [{id:1, name:'test'}] 
      console.log('Search Result', resp); 
      return resp;         
     }, 

     (err) => { 
      console.log('Error Search', err); 
      this.reset(false); 
      this.errors = err; 
      return []; 
     } 
    ); 

    //Comment out method above to see this static data returning and working as should be :'(
    //return [{id:865,issuer: {},name:"British Testing"}, 
    // {id:866,issuer: {},name:"American Testing"}]; 
} 

Сервис

performSearch(searchData) { 
    console.log('Search Qry', searchData); 

    let deferred = this._$q.defer(); 

    if(!this.isValidSearch(searchData)) { 
     deferred.reject({status:400, error: 'Bad Request', message:'invalid data'}); 
     return deferred.promise; 
    } 

    let searchURI = (searchData.type === 'car' ? 'van' : 'issuer'); 

    this._$http({ 
     url: `${this._AppConstants.api}/${this._AppConstants[searchURI]['search']}`, 
     method: 'GET', 
     params: { 
      name: searchData.term 
     } 
    }).then(
     (resp) => { 
      console.log('Search Data', resp); 
      this.result.term = searchData.term; 
      this.result.type = searchURI; 
      deferred.resolve(resp.data[this._AppConstants[searchURI]['searchResp']]); 

     }, 

     (err) => { 
      console.log('Error performing search', err); 
      deferred.reject(err.data); 
     } 
    ); 

    return deferred.promise; 
} 

Answer 1

Вы используете

res as res.name for res in $ctrl.submit($viewValue) 

Что приходит после in должен быть массивом, или обещание массива.

Но это не так. Это то, что возвращается $ctrl.submit(). И этот метод не возвращает ничего:

submit() { 
    this.isSubmitting = true; 

    // no return here 

    this._SearchService.performSearch(this.search) 
    .then(
     (resp) => { 
      //e.g. [{id:1, name:'test'}] 
      console.log('Search Result', resp); 
      return resp;         
     }, 

     (err) => { 
      console.log('Error Search', err); 
      this.reset(false); 
      this.errors = err; 
      return []; 
     } 
    ); 

    // no return here 
} 

Единственного возврат заявления возврата из функции переданного then() и выполняется асинхронно , после того, как метод submit() не возвращается ничего (т.е. undefined).

Таким образом, чтобы быть короткими, вы должны вернуть обещание:

return this._SearchService.performSearch(this.search) ... 

Обратите внимание, что ваш метод обслуживания может быть уменьшен и чист, если вы использовали обещание цепочку, вместо решимости/отклонить антишаблон:

performSearch(searchData) { 
    console.log('Search Qry', searchData); 

    if(!this.isValidSearch(searchData)) { 
     return $q.reject({status:400, error: 'Bad Request', message:'invalid data'}); 
    } 

    let searchURI = (searchData.type === 'car' ? 'van' : 'issuer'); 
    return this._$http.get(`${this._AppConstants.api}/${this._AppConstants[searchURI]['search']}`, { params: {name: searchData.term) } }).then(
     resp => { 
      console.log('Search Data', resp); 
      this.result.term = searchData.term; 
      this.result.type = searchURI; 
      return resp.data[this._AppConstants[searchURI]['searchResp']]); 
     }).catch(resp => { 
      console.log('Error Search', err); 
      this.reset(false); 
      this.errors = err; 
      return $q.reject([]); 
     }); 
}