Angular ui.bootstrap 输入范围滞后

Question

所以我在这里做一些基本的提前输入代码： http://codepen.io/anon/pen/xwZaLN

我只想将输入值传递到一个参数中，以进行基于预输入的异步 http 调用。这样 typeahead 使用的值将异步加载。

这是我的输入：

<input typeahead="ref as ref.display_value for ref in getLocationData('location') | filter:$viewValue | limitTo:8" ng-model="location" ng-model-options="{ debounce: 500 }" />

这是我的代码：

var app = angular.module('test', ['ui.bootstrap']);
(function() {
  //another comment...
  angular
    .module('test')
    .controller('testing', ['$scope', '$rootScope', function($scope, $rootScope) {

      $scope.location = 'Type a Location';

      $scope.getLocationData = function(field) {
        console.log('SCOPE VALUE IS: ', $scope[field]);
        var params = {
          'query': $scope[field]
        };
        //go get HTTP stuff here....eventually.

      };
    }]);

出于某种原因，与 typeahead 函数关联的范围属性始终落后一个摘要周期。

如果您在该 codepen 中打开控制台并开始更改字段值，您将看到控制台日志始终输出先前输入的值而不是当前范围属性。我将范围绑定到文本输出以显示它正在实时更新。

如果您将函数从 typeahead 中调用更改为 ng-change，它就可以正常工作。所以我知道它是提前输入的，但不确定为什么它落后了或者我需要更改什么才能使其工作。

我做错了吗？知道为什么这段代码很奇怪吗？

Answer 1

在更新范围属性之前调用 getLocationData 函数。您可能希望将输入更改为以下内容（注意 $viewValue 作为参数传递给 getLocationData）：

<input typeahead="ref as ref.display_value for ref in getLocationData('location', $viewValue) | filter:$viewValue | limitTo:8" ng-model="location" ng-model-options="{ debounce: 500 }" />

然后在 Javascript 中使用以下内容（注意新的 val 参数）：

$scope.getLocationData = function(field, val) {
    console.log('SCOPE VALUE IS: ', $scope[field]);
    console.log('TYPED IN VALUE IS: ', val);

Angular ui.bootstrap 输入范围滞后

Angular ui.bootstrap typeahead scope lag

angularjs

angular-ui-bootstrap