AngularJS verwenden eine Funktion in einem Controller, um Daten von einem Dienst zur Verwendung in ng-repeat

Question

Ich versuche, eine Funktion in einem Controller verwenden, um Daten zurückzugeben, so dass ich die Funktion in der App wieder aufrufen können die Daten sowie gelegentlich aktualisieren.

Mein Code scheint korrekt, aber in der Praxis stürzt der Browser bei jedem Laden ab.

Ich bin in der Lage, es zu arbeiten, indem Sie eine E-Direktive verwenden und dann das Element in den Teil platzieren, aber das schafft nicht, was ich brauche.

Letztlich würde Ich mag so etwas tun:

<div ng-repeat="user in getListUsers()">{{ user.somedata }}</div> 

ich verschiedene Dinge ausprobiert, um es in Tests zu arbeiten, einschließlich der $ http in der Steuerung setzen, die alle mit den gleichen Ergebnissen.

Wenn ich eine Variable in der Controller-Methode zuweisen, anstatt die Daten zurückzugeben, funktioniert das, aber dann müsste ich die Methode in der Steuerung aufrufen und ich möchte nicht, dass sie standardmäßig ausgeführt wird. Einfach nur den Aufruf in den Vorlagen bei Bedarf machen.

Jede Hilfe, herauszufinden, warum das nicht funktioniert, wäre großartig. Vielen Dank. Hier

ist, was ich habe das nicht funktioniert ...

elite.controller('UserController', function($scope, User){ 

    $scope.getListUsers = function(){ 
     User.listUsers().then(function(response){ 
      return response.users; 
     }); 
    } 

}); 

elite.factory('User', function($http){ 
    var User = { 
     getUser: function(id){ 
      return $http.get('/user/' + id + '/settings').then(function(response){ 
       return response.data; 
      }); 
     }, 
     listUsers: function(){ 
     return $http.get('/user/').then(function(response){ 
      return response.data; 
     }); 
     } 
    } 
    return User; 
}); 

Edit:

unten sind einige der Ideen verwenden, ich bin der Lage, die Funktionalität zu erhalten ich wollte, nur in ein anderer Weg. Grundsätzlich möchte ich, dass die Daten bei Bedarf geladen werden, eher im Vordergrund, da ich versuche, die gesamte Benutzerlogik in diesem Controller zu gruppieren, und ich möchte nicht, dass die vollständigen Daten für jeden Benutzer geladen werden. Ich verwende $ rootScope temporär, bis ich einige Scoping-Vererbungsprobleme herausgefunden habe, da die Verwendung von $ scope.users mit einem Null-Wert in der Vorlage endet. Ich kann sehen, dass der AJAX-Anruf zurückkommt, aber ich bin mir nicht sicher, wohin es geht, aber das ist ein anderes Problem.

elite.controller('UserController', function($scope, $rootScope, User){ 

    $scope.getListUsers = function(){ 

     User.listUsers().then(function(response){ 
      $rootScope.users = response.users; 
     }); 
    }; 

}); 

Und in einem nav-Elemente Ich habe dies:

<div ng-controller="UserController"> 
<a ng-href="/#user/list" ng-click="getListUsers()">user list</a> 
</div> 

Answer 1

Dies ist etwa verdaut $, $ Uhr und ng-repeat. Sie können viele Antworten finden, indem Sie es einfach googeln oder den Link von Jsplaine überprüfen.

Kurz gesagt, Ihre Funktion getListUsers() gibt bei jedem Aufruf eine Liste von Benutzern zurück. Jede zurückgegebene Liste ist jedoch eine neue Sammlung (Array). Zu eckig bedeutet dies, dass die Anzeige der Liste auf der Seite aktualisiert werden muss. Nach jedem Update überprüft Angular tatsächlich einige Male, ob die Liste stabil ist oder nicht, indem die Funktion getListUsers() erneut aufgerufen wird. Jedes Mal, wenn eckig festgestellt hat, dass die Liste unterschiedlich ist, aktualisiert es die Liste und ruft die getListUser-Funktion auf.

Um dieses Problem zu lösen, eine Variable, die Benutzerliste hält erstellen:

$scope.userList = []; 

und auch die Funktion der Liste

$scope.reloadListUsers = function(){ 
    User.listUsers().then(function(response){ 
     $scope.userList = response.users; 
    }); 
} 

Dann im ng-Repeat-Richtlinie zu aktualisieren

Wenn Sie die Liste neu laden möchten, rufen Sie einfach die Funktion reloadListUsers auf.

<button ng-click="reloadListUsers()" > reload </button> 

Der hinter Grund ist, dass jetzt die variable userlist in die Bindung anstelle der Funktionsaufruf Ausdruck verwendet wird, und es wird stabil, sobald die Liste geladen wird.

Answer 2

Es gibt ein paar Probleme. Sie geben einen Wert aus einer anonymen Funktion zurück, die aufgerufen wird, wenn die vom Aufruf $ http.get zurückgegebene Zusage aufgelöst wird. Der Rückgabewert dieser Funktion ist nicht der von getListUsers zurückgegebene Wert.

Außerdem verweisen Sie im Controller-Rückruf auf response.users. Das ist immer noch das rohe Antwortobjekt. Sie haben vielleicht auf react.data.users verwiesen?

Versuchen Sie folgendes:

elite.controller('UserController', function($scope, User){ 

$scope.users = []; 

$scope.getListUsers = function(){ 
    User.listUsers().then(function(response){ 
     $scope.users = response.data.users; 
    }); 
} 

});

elite.factory('User', function($http){ 
var User = { 
    getUser: function(id){ 
     return $http.get('/user/' + id + '/settings'); 
    }, 
    listUsers: function(){ 
    return $http.get('/user/'); 
    } 
} 
    return User; 
}); 

Dann binden sie in der Ansicht:

<div ng-repeat="user in users">{{ user.somedata }}</div> 

Die ng-Repeat-Richtlinie wird keine Elemente ausspucken, wenn die Benutzer nicht definiert oder leer ist.