Question

我查看了有关Async typeahead的官方article and sample。在我简化并删除它并在我的项目中使用之后。

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);
angular.module('ui.bootstrap.demo').controller('TypeaheadCtrl', 

 function($scope, $http) {

  $scope.placeHolder = "Choose";
  $scope.displayPath = "Name";
  $scope.typeaheadminlen = 3;
  // Any function returning a promise object can be used to load values   asynchronously
  $scope.loadOptions = function(val) {
    var stub = [{ Name: "fuuuu" }, { Name: "baaar" }];
    if (!$scope.selected)
        return [];
    return $http.get('http://maps.googleapis.com/maps/api/geocode/json', {
      params: {
        address: "aa",
        sensor: false
      }
    })
    .then(function(response){
      return stub;
    });
  };
});

http://plnkr.co/edit/o4ly4vYJdGCwHk62tN2j?p=preview

这段代码在plunker上运行得很好，但在我的项目中却没有。不知何故，它只工作了几次。其他时候我只看到glyphicon-refresh，但没有出现选项。断点说我正确地得到了return stub;。 plunker中的Angular.JS和Bootstrap版本与我项目中的版本匹配。我有什么想法可以错过吗？

P.S。 div-tag的范围和内容在项目和plunker之间完全复制。

Answer 1

typeahead适用于输入元素。当输入松散焦点时，ui-boostrap-tpls.js不像@kir那样执行代码的某些部分。

如果你有一个从自动完成输入中删除焦点的指令，或者你有一个微调器组件在执行AJAX请求时显示一个图标，它可能会从自动完成输入中夺走焦点。

在我的特定情况下，我使用angular-block-ui，我修复了这种情况，从阻塞中删除阻塞行为：

// Tell the blockUI service to ignore certain requests
blockUIConfig.requestFilter = function(config) {
  // If the request starts with '/api/quote' ...
  if(config.url.match(/^.*MyMethod.*/)) {
    return false; // ... don't block it.
  }
};

Answer 2

这一切都与hasFocus中的ui-bootstrap-tpls.js变量有关，并且＆＃39;模糊＆＃39;事件。出于某种原因，每当发生自动完成选项时，事件就会发生。 ui-bootstrap-tpls.js将hasFocus变量设置为false，导致getMatchesAsync函数出现问题，因为此函数具有以下条件：if (onCurrentRequest && hasFocus)。因此，自动完成选项无法显示。我没能找到模糊的原因＆＃39;事件，所以我刚从条件中删除了hasFocus。我知道，这是一个糟糕的解决方案，但它是我能做的最好的。

Answer 3

请找到适合它的工作解决方案：

HTML PART：

    <!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write('<base href="' + document.location + '" />');</script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
  <script src="script.js"></script>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
  <pre>{{selected.name}}</pre>
  <input autocomplete="off"  
         ng-model="selected" 
         placeholder="Item Name"
         type="text"
         typeahead="item as item.name for item in data | filter:$viewValue" />
</body>
</html>

脚本部分：

    var app = angular.module('plunker',  ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {
  $scope.data = [{id:1,name:"google"}, {id:2, name:"microsoft"},{id:3, name:"ibm"},
  {id:4, name:"cisco"},{id:5, name:"apple"}
,{id:6, name:"nokia"},{id:7, name:"bing"},{id:8, name:"mango"}
];
  $scope.selected = {id:1, name:"google"};
  $scope.selected2 = {};
});

Working Plunker Link：Plunker

Angular.JS中的Async typeahead不显示选项

3 个答案: