ng-repeat의 표현식은 어떻게 작동합니까?

Question

ng-repeat를 사용하여 객체 배열을 반복하는 방법을 파악하려고합니다.

나는 세 세트 데이터와 함께, 다음과 같이 설정 공장을 가지고 :

mainApp.factory("dashboardContent", function() { 
    return { 
     contentBoxes: [ 
      { 
       boxType: "image", 
       boxIcon: "icons-image", 
       boxTitle: "on Chapter 1, paragraph 3", 
       header: { 
        title: "Lorem ipsum title sit amet", 
        subtitle: "by Lorem Ipsum" 
       }, 
       authorImage: "/asssets/ssfsgterwes", 
       embedContent: "" 
      }, 
      { 
       boxType: "audio", 
       boxIcon: "icons-audio", 
       boxTitle: "on Chapter 12, paragraph 2", 
       header: { 
        title: "lorem ipsum audio sit maet", 
        subtitle: "by multiple objects" 
       }, 
       authorImage: "/asssets/ssfsgterwes", 
       embedContent: "" 
      }, 
      { 
       boxType: "quote", 
       boxIcon: "icons-lightbulb", 
       boxTitle: "on Chapter 01, paragraph 5", 
       header: { 
        title: "lorem ipsum quote sit maet", 
        subtitle: "by multiple objects parsing" 
       }, 
       authorImage: "/asssets/ssfsgterwes", 
       embedContent: "" 
      } 
     ] 
    } 
}) 

내가 공장 주입 한 지시문 : 내 관점에서

.directive('contentBox', function(dashboardContent) { 
    return { 
     restrict: 'E', 
     scope: {}, 
     replace: true, 
     templateUrl: '/modules/contentbox.html', 
     link: function (scope, element) { 
      scope.contentData = dashboardContent.contentBoxes; 
      if (!$.isEmptyObject(scope.contentData.header)) { 
       element.children('.content').prepend(
        '<div class="content-header">' + 
         '<span class="content-title">' + 
          scope.contentData.header.title + 
         '</span>' + 
        ' <br/>' + 
        '</div>' 
       ); 
       if (!$.isEmptyObject(scope.contentData.header.subtitle)) { 
        element.find('.content-header').append(
         '<span class="content-author">' + 
          scope.contentData.header.subtitle + 
         '</span>' 
        ); 
       } 
      } 
     } 
    } 
}) 

을 나는 이것을 다음과 같이 반복하려고합니다.

<content-box ng-repeat="content in contentData"></content-box> 

이 경우에 사용할 표현식은 무엇입니까? 나는이 표현이 어떻게 동작 하는지를 ng-repeat 문서에서 이해할 수 없다. contentData의 "content"에서 contentData는 내 객체 집합을 참조하지만, 첫 번째 단어는 무엇인가? 여기), 그것이 무엇을 참조합니까?

또한이 범위를 올바르게 설정 했습니까? 위의 코드에서와 같이 :

나는이에서지고있어 출력은 세 개의 빈 컨텐츠 상자, 그래서 내가 그것을 통해 반복 것 같은데요,하지만 데이터가 그들에 인쇄되고 있지

scope.contentData = dashboardContent.contentBoxes; 

- 즉, {{ contentData.boxTitle}} 그냥 비어 있습니다.

이 상황에서 ng-repeat를 올바르게 사용하고 있습니까?

Answer 1

서비스 dashboardContent을 직접 지침에 삽입하고 있습니다. 그건 꼭 필요 하진 않아. 당신은 컨트롤러에 그것을 주입 할 수 있었고, ng-repeat으로 단일 배열 요소에 액세스하여 지시어에 전달할 수 있습니다. 당신의 지시 코드에서

mainApp.controller('ContentCtrl', function($scope, dashboardContent) { 
    $scope.contentData = dashboardContent.contentBoxes; 
}); 

는

scope: { contentData: '='} 

와

scope: {} 

를 교체하고 scope.contentData=...

라인이 분리 범위와 지침이있을 것이다이 방법을 제거하고 당신이 전달할 수 있습니다 귀하의 html에이 범위에이 값 :

<div ng-controller="ContentCtrl" ng-repeat="content in contentBoxes"> 
    <content-box contentData="content"></content-box> 
</div> 

Answer 2

내 특정 문제에 대한 적절한 해결책은 Esa Toivola in the comment으로 상세히 설명되어 있지만 원래의 질문과 마찬가지로 각도 ng-repeat가 어떻게 작동하는지 언급하고 싶습니다.

<div ng-repeat="content in contentData"></div> 

이 상황에서 : 구문에서

contentData - 실제 배열/데이터 당신은

내용를 사용하는 - 당신이 바인딩 을있는 개체를

그래서 더 당신이 지속될 것에 : 내용이 당신이 출력하고 객체와 제목이

<div ng-repeat="content in contentData"> 
    {{content.title}} 
</div> 

가 그 중 하나는 매개 변수입니다.