简体   繁体   English

angularjs typeahead和异步api调用的问题

[英]Issue with angularjs typeahead and async api call

I've the following implementation, html: 我有以下实现,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. 当我尝试调用远程异步api时,问题开始。 I changed service using ngResource and I tried with following functions: 我使用ngResource更改了服务,并尝试了以下功能:

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!? 在最后一种情况下,我收到有关预期功能的typeerror,可能找不到绑定源!

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. 在所有其他情况下,当我在输入字段中插入字符时,页面加载,api已被调用,但输入列表中未显示任何内容。 If I try a console.log with response from query or from service, array has been obtained properly. 如果我尝试通过console.log从查询或服务获得响应,则已正确获取数组。 It seems that controller or typeahead input field doesn't wait response from api, but I don't understand how to solve this issue. 似乎控制器或预输入字段不会等待api响应,但我不知道如何解决此问题。 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. 在控制台上打印包含所有对象的正确数组,但不会在typeahead字段上添加它们。 I found some example code with same implementation, but I don't understand why in my case it doesn't work. 我发现一些示例代码具有相同的实现,但是我不明白为什么在我的情况下它不起作用。

Issue Solved! 问题已解决! The issue is related to conflict with block-ui module. 该问题与与block-ui模块的冲突有关。 Configure it blockUiConfig with autoblock = false; 使用autoblock = false将其配置为blockUiConfig;

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM