Ich habe gerade mit AngularJS begonnen, und als Projekt habe ich beschlossen, eine einfache App zum Verwalten von Lesezeichen zu erstellen. Ich möchte in der Lage sein, eine Liste von Lesezeichen zu verwalten und Elemente hinzuzufügen/zu entfernen. Ich benutze Django mit Django REST Framework und Angular.AngularJS Kommunikation zwischen ng-repeat und controller
Bisher habe ich einen Dienst geschrieben, um die Lesezeichen aus der Datenbank zu holen, und ich kann sie von meinem Controller auf die Konsole drucken, aber ng-repeat scheint sie nicht zu sehen.
Hier ist mein Code für den Service:
.factory('BookmarkService', ["$http", function ($http) {
var api_url = "/api/bookmarks/";
return {
list: function() {
return $http.get(api_url).then(function (response) {
return response.data
})
}
}
}]);
Und für den Controller:
.controller("ListController",
["$scope", "BookmarkService", function ($scope, BookmarkService) {
$scope.bookmarks = BookmarkService.list();
console.log($scope.bookmarks);
}]);
Und hier ist der HTML:
<div ng-controller="ListController as listCtrl">
<md-card>
<md-card-content>
<h2>Bookmarks</h2>
<md-list>
<md-list-item ng-repeat="bookmark in listCtrl.bookmarks">
<md-item-content>
<div class="md-tile-content">
<p>{[{ bookmark.name }]} - {[{ bookmark.url }]}</p> // used interpolateProvider to allow "{[{" instead of "{{"
</div>
<md-divider ng-if="!$last"></md-divider>
</md-item-content>
</md-list-item>
</md-list>
</md-card-content>
</md-card>
</div>
Als ich von dem an die Konsole drucken Controller Ich kann ein Versprechen Objekt sehen, aber ng-Wiederholung wiederholt sich nicht: image of promise object
Ich würde wirklich schätzen, wenn jemand mir helfen könnte, meinen Fehler zu finden und zu verstehen, warum es passiert. Ich bin immer noch nicht ganz zufrieden damit, wie all diese Teile zusammenpassen.
Danke für Ihre Zeit!
Dank! Diese Antwort behebt dieses Problem. – eilidh
Ich hatte das vorher tatsächlich versucht. Es gab jedoch ein anderes Problem. Die Lesezeichen werden nicht geladen, wenn ich die "controller as" -Syntax verwende, d. H. 'ListCtrl.bookmarks'. Sie nur ohne es. Hast du eine Idee, warum das passiert? – eilidh
Oh, das habe ich vorher nicht bemerkt. Wenn Sie Controller als Syntax verwenden, müssen Sie Eigenschaften an die Controller-Instanz anhängen und nicht an den '$ scope'. In diesem Fall würde das wie '.controller aussehen (" ListController ", [" BookmarkService ", Funktion (BookmarkService)) { this.bookmarks = BookmarkService.list(); console.log (this.bookmarks); }]); 'Beachten Sie das' this' anstelle von '$ scope' –