angularjsasynchronousasp.net-web-api2typeaheadangularjs-ng-resource

Issue with angularjs typeahead and async api call


I've the following implementation, html:

<input id="myField" name="myField" class="form-control" type="text" placeholder="myField"
ng-model="myController.myObj.FieldValue" typeahead-editable="false" 
uib-typeahead="item as item.Description for item in myController.fieldDS($viewValue)" required>

controller:

var vm = this;
vm.fieldDS = myService.getFieldDS;

service:

function getFieldDS() {
return [{'Description': 'ItemA'}, {'Description': 'ItemB'}, {'Description': 'ItemC'}];
}

And it works fine. The issue starts when I'm trying to invoke remote async api. I changed service using ngResource and I tried with following functions:

function getFieldDS() {
  return Resource.query();
}

function getFieldDS() {
  var items = Resource.query();
  return items.$promise;
}

function getFieldDS() {
  var items = Resource.query();
  items.$promise.then(
     function (result, responseHeaders) {
       return result;
     },
     function (httpResponse) { console.log('failed: ' + httpResponse); }
  );
}

or with code on controller:

vm.fieldDS = myService.getFieldDS;

vm.fieldDS = function () {return myService.getFieldDS();};

myService.getFieldDS().then(function (result) { vm.fieldDS = result;})

in last case I receive typeerror about function expected, maybe typeahead not found binding source!?

In all other case, when I insert a character on input field, page load, api has been called, but nothing is showed on input list. If I try a console.log with response from query or from service, array has been obtained properly. It seems that controller or typeahead input field doesn't wait response from api, but I don't understand how to solve this issue. Please may you help me? Thanks a lot

edit: service method:

function getFieldDS() {
  var items = Resource.query();
  return items.$promise;
}

and controller:

function getSomething() {
 var temp = myService.getFieldDS();
 temp.then(
   function(result) {
     console.log(result);
     return result;
   }
 );
 return temp;
}
vm.fieldDS = getSomething;

prints on console the proper array with all objects, but they aren't add on typeahead field. I found some example code with same implementation, but I don't understand why in my case it doesn't work.


Solution

  • Issue Solved! The issue is related to conflict with block-ui module. Configure it blockUiConfig with autoblock = false;