Question

我知道自定义开箱即用的typeahead指令不是一个好主意，所以继续为我的自定义创建另一个名为type-ahead-custom的指令。

此处 plunker https://plnkr.co/edit/PmYRm37Uqn6CFYAXuUcl

输出

s = ui上没有显示结果，即使我们从服务器获取数据。

so =现在你看到了之前查询结果的结果，即使我们找回了＆＃39;所以＆＃39;

的数据

sou =现在你看到了之前查询结果的结果，即＆＃39;所以＆＃39;，即使我们收到了＆＃39; sou＆＃39;

的数据

这仍在继续。的 HTML

<div ng-app="exampleApp">
<form class="form-horizontal" ng-controller="myCtrl" >
  <div class="form-group">
    <div>
      <label for="account" class="col-sm-2 col-md-2 control-label customize-label ">Typeahead</label>
      <div class="col-sm-8">
        <div class="inner-addon right-addon">

          <input type="text" ng-model="selectedOptions.planes" uib-typeahead="plane as plane.formatted_address for plane in data" type-ahead-custom="maps" typeahead-loading="loadingdata" typeahead-no-results="noResults" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" aria-autocomplete="list" aria-expanded="false" aria-owns="typeahead-4-8758" />
        </div>
      </div>
    </div>
  </div>
</form>
</div>

例如上面的代码type-ahead-custom="maps"是我的指令，这里我提供表名来获取数据（这里例如我只是传递一个字符串）。

的Javascript

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

exampleApp.directive('typeAheadCustom', function($http) {
return {
    priority: 1,
    link: function($scope, $element, $attributes) {

        $scope.data = [];
        $scope.$watch($attributes.ngModel, function(newValue, oldValue) {

         $http.get('//maps.googleapis.com/'+$attributes.typeAheadCustom+'/api/geocode/json', {
             params: {
                 address: newValue,
                 sensor: false
                 }
           }).success(function(data) {
              $scope.data = data.results;
          });

        });

    }
}
});

由于DOM同时具有指令type-ahead-custom和uib-typeahead，因此我已经指示priority:1使其首先执行。

问题：在我的指令到位的情况下，在UI上显示数据时，typeahead似乎落后于一个$ http请求。

例如，如果您首先输入。

我不确定为什么会发生这种情况或如何解决这个问题。任何指针都会有所帮助。

Answer 1

使用$ q服务帮助我解决了同样的问题。我稍微修改了你的代码。

在index.html中将plane in data更改为plane in search($viewValue)

<input type="text" ng-model="selectedOptions.planes" uib-typeahead="plane as plane.formatted_address for plane in search($viewValue)" type-ahead-custom="maps" typeahead-loading="loadingdata" typeahead-no-results="noResults" class="form-control ng-valid ng-dirty ng-valid-parse ng-touched" aria-autocomplete="list" aria-expanded="false" aria-owns="typeahead-4-8758" />

并在link替换观察者中使用返回承诺的search函数。

$scope.search = function(newValue) {
    var dfr = $q.defer();
    $http.get('//maps.googleapis.com/'+$attributes.typeAheadCustom+'/api/geocode/json', {
         params: {
             address: newValue,
             sensor: false
             }
         }).success(function(data) {   
              dfr.resolve(data.results);
         });
    return dfr.promise;
};

当然，你需要注入$ q服务：

exampleApp.directive('typeAheadCustom', function($http, $q) {
...

工作plnkr例子：https://plnkr.co/edit/oJBoV5M58tLHMvvSAOkS

Typeahead似乎落后于一个$ http请求，这里的bug是什么？

1 个答案: