0

I am trying to reuse the same partial to display data. I want to display girls winners on the left side of the screen using that template and boys on the right side. Unfortunately data is not displaying in the template, so I am assuming I am not passing it correctly. Is it possible to reuse the same template without having directive for it as it is described in http://jsfiddle.net/api/post/library/pure/ ? There will be much more info to display in that template. This is second project I am trying with angular, so your advise is highly appreciated. Thank you

Main screen:

<section id="data">
   <div class="leftSection left" >
     <div ng-model="leftWinner"  ng-include src="'partials/winner.html'"></div>
   </div>
  <div class="middleSection left" ng-include src="'partials/middleImage.html'"></div>
    <div class="rightSection left">
     <div  ng-model="rightWinner"  ng-include src="'partials/winner.html'"></div>
  </div>
</section>

Template:

<section class="winnerContaner">
  <div class="title">{{fullName}}</div>
  <div class="title">{{lastName}}</div>
</section>

Controller where I am specifying what model has what data: 

            $scope.data=testData;

            $http.get('js/options.json').success(function(data) {
                $scope.options = data;
                $scope.leftWinner = $scope.data.years[0].winners[$scope.options.leftSide];
                $scope.rightWinner = $scope.data.years[0].winners[$scope.options.rightSide];
            });
kaplievabell
  • 759
  • 1
  • 11
  • 27
  • Why you do not want to create directive for it? Directive is true angular way for this case. – ne4istb Aug 22 '14 at 20:49
  • I was not aware that directives are true angular way for the layout reuse. I thought partials were for layout reuse, and directives are for DOM manipulations. Thank you – kaplievabell Aug 25 '14 at 13:35
  • @ne4istb thank you for the reply! I see that indeed directive with templateUrl is the way to go. – kaplievabell Aug 25 '14 at 14:21

1 Answers1

1

So, to close this question, final solution with directive:

Main screen:

<section id="data">
   <div class="leftSection left" >
       <winner-panel model="leftWinner"/>
   </div>
   <div class="middleSection left" ng-include src="'partials/middleImage.html'"></div>
    <div class="rightSection left">
      <winner-panel model="rightWinner"/>
   </div>
</section>

Template:

<section class="winnerContaner">
  <div class="title">{{model.fullName}}</div>
  <div class="title">{{model.lastName}}</div>
</section>

And directive:

app.directive('winnerPanel', function() {
    return {
        restrict: 'E',
        templateUrl: 'partials/winner.html', 
        replace: true,
        scope: {
            model: '&'
        }       
    }
});
ne4istb
  • 662
  • 5
  • 17