AngularJS ng-repeat와 컨트롤러 간의 통신

방금 AngularJS를 사용하기 시작했고 프로젝트로 북마크 관리를위한 간단한 앱을 만들기로 결정했습니다. 즐겨 찾기 목록을 유지 관리하고 항목을 추가/제거 할 수 있기를 원합니다. 나는 Django REST 프레임 워크와 Angular를 사용하고있다.AngularJS ng-repeat와 컨트롤러 간의 통신

지금까지 데이터베이스에서 책갈피를 가져 오는 서비스를 작성했으며 컨트롤러에서 콘솔로 인쇄 할 수 있지만 ng-repeat은 표시되지 않습니다.

다음은 서비스에 대한 내 코드입니다 :

.factory('BookmarkService', ["$http", function ($http) { 
    var api_url = "/api/bookmarks/"; 
    return { 
     list: function() { 
      return $http.get(api_url).then(function (response) { 
       return response.data 
      }) 
     } 
    } 
}]);

및 컨트롤러 : 여기

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

그리고 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>

전에서 콘솔에 인쇄 할 때 컨트롤러 나는 약속 객체를 볼 수 있지만 반복은 반복하지 않는다 : image of promise object

누군가 내 실수를 찾아 내고 그것이 왜 일어나고 있는지 이해할 수 있다면 정말 고맙겠습니다. 나는이 모든 부분들이 어떻게 어울리는 지에 대해 여전히 불만 스럽다.

시간 내 주셔서 감사합니다.

출처

2016-06-13 eilidh

나는 문제의 코드를 볼 두 가지 문제가있다을 만드는 것입니다.

첫 번째는 제어기를 구문 (ng-controller="ListController as listCtrl")으로 사용하면 제어기 인스턴스를 사용하여 제어기 이름으로 주소를 지정할 경우 속성이 제어기 인스턴스에 바인드되어야한다는 것입니다. 귀하의 경우,

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

두 번째는 당신이 당신의 $scope.bookmarks 속성에 약속을 할당하는 것입니다. repeater는 반복 할 오브젝트 배열을 기대합니다. 약속에 의해 해결 된 값을 $scope.bookmarks에 할당하려고합니다. 대신이

$scope.bookmarks = BookmarkService.list();

의

이

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

출처

2016-06-13 19:28:46

감사처럼 보일 것이다 컨트롤러의

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

최종 버전을 수행! 이 대답은 그 문제를 해결했습니다. – eilidh

이전에 실제로 시도 했었습니다. 그러나 또 다른 문제가있었습니다. '컨트롤러로'구문 즉, 'listCtrl.bookmarks'구문을 사용하면 북마크가로드되지 않습니다. 그들은 단지 그것없이. 왜 그런 일이 일어나는 지 아십니까? – eilidh

오 이전에 알지 못했습니다. 콘트롤러를 신텍스로 사용할 때'$ scope'가 아닌 콘트롤러 인스턴스에 프로퍼티를 붙일 필요가 있습니다. 이 경우에는 '.controller ("ListController", [ "BookmarkService", function (BookmarkService) { this.bookmarks = BookmarkService.list(); console.log (this.bookmarks); }]와 같이 표시됩니다.);''$ scope' 대신에'this'를 보자. –

이것은 간단합니다. Ng-repeat는 약속들로 작동하지 않습니다. . 그래서, 당신은 두 가지 방법으로 갈 수 있습니다

BookmarkService.list()을 (기능 (responce) { $ scope.bookmarks = responce.data; });
또 다른 방법은 자신의 repiter ^)

Ng-repeat doc

출처

2016-06-13 19:25:37 Vitalii

AngularJS ng-repeat와 컨트롤러 간의 통신

답변

관련 문제