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

我查看了关于Async typeahead的官方article and sample。当我简化并将它存根并用于我的项目。Angular.JS中的Async typeahead不显示选项

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;。版本号Angular.JS和Bootstrap与我的项目版本匹配。任何想法我可能会错过什么？

P.S. div-tag的范围和内容在项目和抢劫者之间完美复制。

来源

2015-05-29 kir

这一切都是关于hasFocus变量ui-bootstrap-tpls.js和'模糊'事件。由于某种原因，每当出现自动完成选项时都会发生此事件。 ui-bootstrap-tpls.js设置为hasFocus变量为false，并在getMatchesAsync函数中导致问题，因为此函数具有以下条件：if (onCurrentRequest && hasFocus)。所以自动完成选项不会出现。我没有找到'模糊'事件的原因，所以我只是从条件中删除hasFocus。我知道，这是不好的解决方案，但它是我能做到的最好的。

来源

2015-06-02 13:41:21 kir

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

HTML部分：

<!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 = {}; 
});

工作Plunker链接：Plunker

来源

2015-06-02 13:54:58

的预输入工作在一个输入元素。当输入松散焦点时，则ui-boostrap-tpls.js不会像@kir所说的那样执行代码的某些部分。

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

在我的具体情况中，我使用的角度块的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. 
    } 
};

来源

2015-06-05 18:46:07 Aquiles

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

回答

相关问题