AngularUI-引导的键盘缓冲无法读取``undefined`的length`物业 [英] AngularUI-Bootstrap's Typeahead Can't Read `length` Property of `undefined`

问题描述

我收到以下错误，当我尝试从AngularUI自举一个预输入值，使用一个承诺。

I am getting the following error when I attempt to get a typeahead values from AngularUI-Bootstrap, using a promise.

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标记是：

My HTML tag is:

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

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

With my getTypeaheadValues function doing the following:

$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，引导被抱怨为是不确定的。如果我删除的最顶端返回注释值显示的罚款。在成功的的console.log 输出也全部归还我期待在数组中的值。

I do not understand what AngularUI-Bootstrap is complaining about as being undefined. If I remove the comment on the top-most return the values show up fine. The console.log output in the success also return all the values I'm expecting in an array.

我在想什么，会导致AngularUI，引导没有看到返回的数组？

What am I missing that would cause AngularUI-Bootstrap not see the returned array?

推荐答案

这个问题是双重的。

第一，我不返回的承诺事件（ $ HTTP 调用）。缺少了return语句（如@tobo指出的）是直接导致了错误。我需要，虽然被返回的承诺，而不是数组。

The first is that I was not returning the promise event (the $http call). The lack of a return statement (as @tobo points out) is what was causing the error directly. I needed to be returning the promise though, not the array.

第二个是我需要使用。然后，而不是 .success 为AngularUI-引导挑了结果。

The second is that I need to be using .then rather than .success for AngularUI-Bootstrap to pick up the results.

我跑过了以下问题：
<一href=\"http://stackoverflow.com/questions/15930339/how-to-tie-angular-uis-typeahead-with-a-server-via-http-for-server-side-optimi\">How通过$ HTTP与服务器，以配合棱角分明的UI的预输入服务器端优化？

有哪些更新我的函数调用如下：

Which updated my function call to the below:

$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;
    });
}

这篇关于AngularUI-引导的键盘缓冲无法读取``undefined`的length`物业的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！