Question

我发现了一个SO问题，向我展示了如何使用Angular UI - 使用$ http对象的Bootstrap typeahead。它工作正常（见第一个插件），直到我将Angular版本更改为1.2RC2，现在它已经失败了。我不太了解Angular代码以找出原因。在1.05和1.2之间进行了哪些更改以打破此代码

此插件有效：http://plnkr.co/edit/eGG9Kj?p=preview

此插件不起作用：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 beacause匹配未定义。

Answer 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对象。实现的更改使得promise返回值被自动解析，导致值未定义。由于typeahead指令不期望这种行为，它会崩溃。

您可以通过让您的功能违反承诺来暂时解决问题：

promise.$$v = promise;

$$ v是自动解析promises时内部返回的值，它也会将promise的结果赋值给该值。

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

只是一些额外的信息 - 我相信在RC2之前，在范围内评估的promise对象会自动解析，但返回promises的函数调用却没有。这一变化是为了在处理承诺时保持一致的功能。

角度UI类型前导方差介于1.0和1.2之间

1 个答案: