0

我发现了一个 SO question，它向我展示了如何使用 Angular UI - Bootstrap typeahead with $http object。在我将 Angular 版本更改为现在失败的 1.2RC2 之前，它运行良好（参见第一个 plunk）。我不太了解 Angular 代码，无法弄清楚原因。1.05 和 1.2 之间发生了什么改变来破坏这个代码

这个笨拙的作品：http ://plnkr.co/edit/eGG9Kj?p=preview

这个 plunk 不起作用：http ://plnkr.co/edit/HdVBpp?p=preview

相关代码

HTML

<html ng-app="plunker">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.2.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>

    <alert type="'info'" >Typeahead from  <a href="http://angular-ui.github.com/bootstrap/">http://angular-ui.github.com/bootstrap/</a>"</alert>
    <div class='container-fluid' ng-controller="TypeaheadCtrl">
        <pre>Model: {{result | json}}</pre>
        <input type="text" ng-model="result" typeahead="suggestion for suggestion in cities($viewValue)">
    </div>
  </body>
</html>

Javascript

angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope, $http, limitToFilter) {

  //http://www.geobytes.com/free-ajax-cities-jsonp-api.htm

  $scope.cities = function(cityName) {
    return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q="+cityName).then(function(response){
      return limitToFilter(response.data, 15);
    });
  };

}

matches.length它在第 1564 行的 Angular UI 代码中失败，因为未定义匹配项，因此无法找到匹配项。

4

1 回答 1

4

https://github.com/angular/angular.js/issues/4158

https://github.com/angular-ui/bootstrap/issues/949

它与 1.2.0-rc2 中的这一变化直接相关。以前，当使用 scope.$eval 评估函数调用并返回一个 Promise 时，它​​将返回原始的 Promise 对象。实施的更改使得承诺返回值被自动解析，导致该值未定义。由于 typeahead 指令不希望出现这种行为，它会崩溃。

你可以通过让你的函数稍微修改一下promise来临时解决这个问题：

promise.$$v = promise;

$$v 是 Angular 在自动解析 Promise 时将在内部返回的值，它也会将 Promise 的结果分配给该值。

我建议坚持使用 rc1 或等待 rc3，因为这个问题和功能可能会改变。

只是一些额外的信息——我相信在 RC2 之前，在作用域上评估的 promise 对象会被自动解析，但返回 promise 的函数调用不会。进行更改是为了在处理 Promise 时保持一致的功能。

于 2013-10-07T18:25:19.020 回答