Question

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

我只想将输入值传入基于typeahead的异步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函数关联的scope属性始终是一个摘要周期。

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

如果您将函数从预先更改更改为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 typeahead scope lag

1 个答案: