AngularUI-Bootstrap's Typeahead kann `length` nicht lesen Eigenschaft von` undefined`

Ich erhalte die folgende Fehlermeldung, wenn ich Versuch, eine typeahead-Werte aus AngularUI-Bootstrap, mit einem Versprechen.

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)

Meine HTML-tag ist:

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

Mit meinem getTypeaheadValues Funktion wie folgt:

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

Ich verstehe nicht, was AngularUI-Bootstrap ist beschweren sich über als nicht definiert. Wenn ich entfernen Sie den Kommentar auf der obersten return die Werte in Ordnung. Die console.log Ausgabe in der success auch wieder alle Werte erwarte ich in einem array.

Was bin ich, würde dazu führen, AngularUI-Bootstrap nicht sehen, das zurückgegebene array?

InformationsquelleAutor der Frage Evil Closet Monkey | 2013-10-22

22

Dieses problem war zwei Falten.

Die erste ist, dass ich nicht wieder das Versprechen Ereignis (die $http nennen). Das fehlen einer return-Anweisung (wie @tobo Punkte out) ist das, was verursacht die Fehler direkt. Ich musste zurückkehren, das Versprechen aber nicht das array.

Das zweite ist, dass ich brauchen, um mit .then eher als .success für AngularUI-Bootstrap zum abholen der Ergebnisse.

Lief ich über die folgende Frage:
How to tie angular-ui - typeahead mit einem server über $http für die server-Seite-Optimierung?

Die aktualisierte meine Funktion aufrufen, um die folgenden:
```
$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;
    });
}
```
InformationsquelleAutor der Antwort Evil Closet Monkey

$Umfang.getTypeaheadValues ist nicht die Rückgabe eines array. Es gibt null zurück, weil
return-Anweisung ist in der callback-Funktion "Erfolg", die aufgerufen wird, ungleichzeitigkeiten.

Vielleicht dies funktionieren wird:

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

InformationsquelleAutor der Antwort T.Riemer

-1

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