Angular UI typeahead 差异在 1.0 和 1.2 之间答案

【问题标题】：Angular UI typeahead variance between 1.0 and 1.2Angular UI typeahead 差异在 1.0 和 1.2 之间
【发布时间】：2013-10-08 02:25:19
【问题描述】：

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

这个 plunk 有效：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);
    });
  };

}

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

【问题讨论】：

标签： angularjs angular-ui angular-ui-bootstrap

【解决方案1】：

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.$$v = promise;

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

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

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

【讨论】：

您提到的 hack 并不能解决这个特定问题，但回到 RC1 可以解决问题，我猜 RC3 会强制在 Angular UI 中解决问题。我相信我犯了一个错误，没有坚持使用 1.05。 Angular 团队在更改功能时不应将它们标记为 RC。 RC 应该是 Beta 版后。