2016-06-13 8 views
1

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!

Antwort

1

Es gibt zwei Probleme, die ich mit dem Code in Frage sehen zu erstellen.

Die erste besteht darin, dass die Verwendung des Controllers als Syntax (ng-controller="ListController as listCtrl") erfordert, dass Eigenschaften an die Controller-Instanz und nicht an den Bereich gebunden werden, wenn Sie sie mithilfe des Controllernamens adressieren. In Ihrem Fall

.controller("ListController", 
    ["BookmarkService", function (BookmarkService) { 
    this.bookmarks = BookmarkService.list(); 
    console.log(this.bookmarks); 
    }]); 

Die zweite ist, dass Sie ein Versprechen an Ihre $scope.bookmarks Eigenschaft zuweisen. Der Repeater erwartet, dass ein Array von Objekten durchlaufen wird. Sie möchten den Wert, der durch das Versprechen aufgelöst wird, wirklich auf $scope.bookmarks zuweisen.

Statt dieser

$scope.bookmarks = BookmarkService.list(); 

Tun Sie dies

BookmarkService.list().then(function(result){ 
    this.bookmarks = result; 
}); 

Die endgültige Version des Controllers wie diese

etwas aussehen sollte
.controller("ListController", 
    ["BookmarkService", function (BookmarkService) { 
    this.bookmarks = BookmarkService.list(); 
    console.log(this.bookmarks); 
    }]); 
+0

Dank! Diese Antwort behebt dieses Problem. – eilidh

+0

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

+0

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' –

0

Das ist einfach. Ng-repeat funktioniert nicht mit Versprechen. So können Sie mit zwei Wege gehen:.

  1. BookmarkService.list() dann (function (Antwort-) { $ scope.bookmarks = responce.data; });

  2. Ein anderer Weg ist eigenen repiter ^)

Ng-repeat doc