ディレクティブ内の2番目のオブジェクトのみにアクセスしてテンプレートを作成する

Question

私はAngularJsでディレクティブがどのように機能するかを理解しようとしていますが、これは私が扱っているオブジェクトですが、はるかに簡単なオブジェクト管理する。

angular.module('AngularJsExercise.controllers', []). 
     controller('angularJsExerciseController', function($scope, angularJsServices) { 
      $scope.advisor = { 
         name : "TheTitle", 
         pages: [ 
          { 
           id: 1, 
           pageNum: 0, 
           pageText: "First Page", 
           questions: [ 
            { 
             id: 11, 
             questionText: "I am looking for a new printer for...", 
             questionType: "RADIO_BUTTONS", 
             mandatory: true 
            } 
           ] 
          }, 
          { 
           id: 2, 
           pageNum: 1, 
           pageText: "Second Page", 
           questions: [ 
            { 
             id: 22, 
             questionText: "Printer should have..", 
             questionType: "CHECKBOX", 
             mandatory: false 
            }, 
            { 
             id: 22, 
             questionText: "What color ?", 
             questionType: "CHECKBOX", 
             mandatory: false 
            } 
           ] 
          }, 
          { 
           id: 3, 
           pageNum: 2, 
           pageText: "Third Page", 
           questions: [ 
            { 
             id: 33, 
             questionText: "I am looking for a new printer for...", 
             questionType: "RADIO_BUTTONS", 
             mandatory: true 
            } 
           ] 
          }, 
          { 
           id: 4, 
           pageNum: 3, 
           pageText: "Fourth Page", 
           questions: [ 
            { 
             id: 44, 
             questionText: "Price range", 
             questionType: "SINGLE_SLIDER", 
             mandatory: false 
            }, 
            { 
             id: 444, 
             questionText: "Printer size", 
             questionType: "DOUBLE_SLIDER", 
             mandatory: false 
            } 
           ] 
          } 
         ] 
        }; 

私は/表示することができますどのように、私は唯一のオブジェクトの第二部、「ページ」でテンプレートを作成したいが、それはまた私のタイトルである第一の部分をもたらすには、単一のページ要素を表しますこのタイプの複雑なオブジェクトには、すべての賛否両論がありますか？ここに私のディレクティブです：

angular.module('AngularJsExercise.controllers') 
      .directive('advisorPage', function() { 
       return { 
        restrict: 'E', 
        scope:{ 
         data: '=' 
        }, 
        // template: "<h1>{{advisor.name}}</h1>", <-- I want this part to have all of the attributes of the second object to display. 
        controller: function($scope){ 
         console.log($scope.data); 
        }, 
        templateUrl: 'advisorPage.template' 
       }; 
      }); 

そして、ここで私はあなたが1ページを表し、ループ内でそれを使用するディレクティブを作成する必要が修正わかるように、最後の部分

angular.module('AngularJsExercise', [ 
     'AngularJsExercise.services', 
     'AngularJsExercise.controllers', 
     'AngularJsExercise.filters' 
    ]); 


<div ng-app="AngularJsExercise" ng-controller="angularJsExerciseController"> 
     <!-- display pages with questions --> 
     <div ng-repeat="adv in advisor"> 
      <advisor-page data='adv'> </advisor-page> 
     </div> 

     <!-- advisorPage directive template --> 
     <script type="text/ng-template" id="advisorPage.template"> 

     </script> 
    </div> 

Answer 1

です。

<advisor-page page="page" ng-repeat="page in advisor.pages"> 
    <page-question question="question" ng-repeat="question in page.questions"></questions> 
</advisor-page> 

あなたは、あなたが表現したい各エンティティのために互いに内側にネストディレクティブにng-transcludeを使用することができます。あなたは、あなたが別で1つのディレクティブをラップし、必要なすべての情報を表示することができ

angular.module('AngularJsExercise.controllers') 
.directive('advisorPage', function() { 
    return { 
    restrict: 'E', 
    scope:{ 
     page: '=' 
    }, 
    template: '<div class="page-wrapper">' + 
       '<p>{{page.pageText}}</p>' 
       '<ng-transclude></ng-transclude>' + 
       '</div>' 
    }; 
}); 

ようになりディレクティブ。