AngularJs+Bootstrap+Typeahead+Ajax 仅在我放置警告框时才有效，但仅在 chrome 中有效

Question

我在这个链接http://angular-ui.github.io/bootstrap/使用带有angularjs的bootsrap typehead

在我的控制器中

 $scope.getUser = function(val) {
        //alert("hi");
         return $http.get('user/getUserNames.do', {
              params: {
                userName: val,

              }
            }).then(function(response){

              return response.data;


            });


          };

我的html代码

<input type="text" ng-model="asyncSelected"  typeahead-wait-ms="300" typeahead="user for user in getUser($viewValue)"  class="form-control">

如果删除警报，打字头将无法工作

如果我保持警报，打字头将仅在 chrome 中工作

如果我在“return $http.get('user/getUserNames.do'”处设置断点并使用 fire bug 它在 firefox 中工作

我正在从服务器接收此格式 ['name1','name2'] 的数据

请大家帮忙

提前致谢

Answer 1

那是因为关闭收到异步数据的警报所花费的时间。您应该将数据存储在 $scope 上，而不是在 $scope 上调用函数

   $scope.users= {};
   $scope.getUser = function(val) {

     return $http.get('user/getUserNames.do', {
          params: {
            userName: val,

          }
        }).then(function(response){

          $scope.users=  response.data;


        });


      };

html

  <input type="text" ng-model="asyncSelected"  ng-change="getUser($viewValue)"
  typeahead-wait-ms="300" typeahead="user for user in users"  class="form-control">

Answer 2

您的 cods 逻辑不正确，您无法从异步函数返回这样的数据，需要时间来完成，

不要从此 getUser 函数返回任何内容。你有两个选择：

1 - 将 responce.data 存储在一个全局变量中以供以后使用

$scope.users = [];
$scope.getUser = function (val) {
    $http.get('user/getUserNames.do', {
        params: {
            userName: val
        }
    }).then(function (response) {
        $scope.users.push(response.data);
    });
};

2 - 当get函数完成时调用另一个函数来处理接收到的数据

$scope.getUser = function (val) {
    $http.get('user/getUserNames.do', {
        params: {
            userName: val
        }
    }).then(function (response) {
        $scope.userLoaded(response.data);
    });
};

Answer 3

通过 angular-ui-bootstrap 中的简单 hack，我解决了问题

之前…………

 var getMatchesAsync = function(inputValue) {

        var locals = {$viewValue: inputValue};
        isLoadingSetter(originalScope, true);
        $q.when(parserResult.source(originalScope, locals)).then(function(matches) {

          //it might happen that several async queries were in progress if a user were typing fast
          //but we are interested only in responses that correspond to the current view value
          var onCurrentRequest = (inputValue === modelCtrl.$viewValue);
          if (onCurrentRequest && hasFocus) {
            if (matches.length > 0) {

              scope.activeIdx = focusFirst ? 0 : -1;
              scope.matches.length = 0;

              //transform labels
              for(var i=0; i<matches.length; i++) {
                locals[parserResult.itemName] = matches[i];
                scope.matches.push({
                  id: getMatchId(i),
                  label: parserResult.viewMapper(scope, locals),
                  model: matches[i]
                });
              }

              scope.query = inputValue;
              //position pop-up with matches - we need to re-calculate its position each time we are opening a window
              //with matches as a pop-up might be absolute-positioned and position of an input might have changed on a page
              //due to other elements being rendered
              scope.position = appendToBody ? $position.offset(element) : $position.position(element);
              scope.position.top = scope.position.top + element.prop('offsetHeight');

              element.attr('aria-expanded', true);
            } else {
              resetMatches();
            }
          }
          if (onCurrentRequest) {
            isLoadingSetter(originalScope, false);
          }
        }, function(){
          resetMatches();
          isLoadingSetter(originalScope, false);
        });
      };

我刚刚从代码中删除了 '&& hasFocus' 这个 sipneet

之后…………

var getMatchesAsync = function(inputValue) {

            var locals = {$viewValue: inputValue};
            isLoadingSetter(originalScope, true);
            $q.when(parserResult.source(originalScope, locals)).then(function(matches) {

              //it might happen that several async queries were in progress if a user were typing fast
              //but we are interested only in responses that correspond to the current view value
              var onCurrentRequest = (inputValue === modelCtrl.$viewValue);
              if (onCurrentRequest) {
                if (matches.length > 0) {

                  scope.activeIdx = focusFirst ? 0 : -1;
                  scope.matches.length = 0;

                  //transform labels
                  for(var i=0; i<matches.length; i++) {
                    locals[parserResult.itemName] = matches[i];
                    scope.matches.push({
                      id: getMatchId(i),
                      label: parserResult.viewMapper(scope, locals),
                      model: matches[i]
                    });
                  }

                  scope.query = inputValue;
                  //position pop-up with matches - we need to re-calculate its position each time we are opening a window
                  //with matches as a pop-up might be absolute-positioned and position of an input might have changed on a page
                  //due to other elements being rendered
                  scope.position = appendToBody ? $position.offset(element) : $position.position(element);
                  scope.position.top = scope.position.top + element.prop('offsetHeight');

                  element.attr('aria-expanded', true);
                } else {
                  resetMatches();
                }
              }
              if (onCurrentRequest) {
                isLoadingSetter(originalScope, false);
              }
            }, function(){
              resetMatches();
              isLoadingSetter(originalScope, false);
            });
          };