18

当我尝试使用 Promise 从 AngularUI-Bootstrap 获取 typeahead 值时，出现以下错误。

TypeError: Cannot read property 'length' of undefined
  at http://localhost:8000/static/js/ui-bootstrap-tpls-0.6.0.min.js:1:37982
  at i (http://localhost:8000/static/js/angular.min.js:79:437)
  at i (http://localhost:8000/static/js/angular.min.js:79:437)
  at http://localhost:8000/static/js/angular.min.js:80:485
  at Object.e.$eval (http://localhost:8000/static/js/angular.min.js:92:272)
  at Object.e.$digest (http://localhost:8000/static/js/angular.min.js:90:142)
  at Object.e.$apply (http://localhost:8000/static/js/angular.min.js:92:431)
  at HTMLInputElement.Va.i (http://localhost:8000/static/js/angular.min.js:120:156)
  at HTMLInputElement.x.event.dispatch (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:14129)
  at HTMLInputElement.v.handle (http://localhost:8000/static/js/jquery-1.10.2.min.js:5:10866)

我的 HTML 标签是：

<input type="text" class="form-control" id="guestName" ng-model="name" typeahead="name for name in getTypeaheadValues($viewValue)">

我的getTypeaheadValues函数执行以下操作：

$scope.getTypeaheadValues = function($viewValue)
{
    // return ['1','2','3','4'];

    $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).error(function ($data) {
        console.log("failed to fetch typeahead data");
    }).success(function ($data) {
        var output = [];
        $data.objects.forEach(function (person)
        {
            output.push(person.name);
        });
        console.log(output);
        return output;
    });
}

我不明白 AngularUI-Bootstrap 抱怨什么未定义。如果我删除最顶部的评论，return则值会显示得很好。中的console.log输出success还返回我期望在数组中的所有值。

我错过了什么会导致 AngularUI-Bootstrap 看不到返回的数组？

4

3 回答 3

22

这个问题是双重的。

首先是我没有返回承诺事件（$http调用）。缺少 return 语句（正如@tobo 指出的那样）是直接导致错误的原因。我需要返回承诺，而不是数组。

第二个是我需要使用.then而不是.successAngularUI-Bootstrap 来获取结果。

我遇到了以下问题： How to tie angular-ui's typeahead with a server via $http for server side optimization？

这将我的函数调用更新为以下内容：

$scope.getTypeaheadValues = function($viewValue)
{
    return $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).then(function ($response) {
        var output = [];

        console.log($data);

        $response.data.objects.forEach(function (person)
        {
            output.push(person.name);
        });

        console.log(output);
        return output;
    });
}
于 2013-10-22T18:53:12.340 回答
2

$scope.getTypeaheadValues 没有返回任何数组。它返回null，因为你的return语句在回调函数“success”中，称为异步。

也许这会起作用：

$scope.getTypeaheadValues = function($viewValue)
{    
    var output = [];
    $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).error(function ($data) {
        console.log("failed to fetch typeahead data");
    }).success(function ($data) {            
        $data.objects.forEach(function (person)
        {
            output.push(person.name);
        });
        console.log(output);        
    });
    return output;
}
于 2013-10-22T18:29:34.120 回答
-2 
$scope.getTypeaheadValues = function($viewValue)
{
    var someOutput="";//return something

    $http({
        method: 'GET',
        url: 'api/v1/person?name__icontains=' + $viewValue
    }).error(function (data) {
        console.error(data);
    }).success(function (data) {
        console.log(data);//Do whatever you want 
    });
return someOutput;

}

//缺少return语句

于 2015-03-16T13:35:04.817 回答