Angular.js reuse partial for different data

Question

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];
            });

Why you do not want to create directive for it? Directive is true angular way for this case. — ne4istb
– ne4istb, Commented Aug 22, 2014 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
– kaplievabell, Commented Aug 25, 2014 at 13:35
@ne4istb thank you for the reply! I see that indeed directive with templateUrl is the way to go. — kaplievabell
– kaplievabell, Commented Aug 25, 2014 at 14:21

ne4istb · Accepted Answer · 2014-08-25 18:03:39Z

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: '&'
        }       
    }
});

answered Aug 25, 2014 at 18:03

ne4istb

6726 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kaplievabell Over a year ago

That is pretty much what I ended up doing. Thank you for leading me in the correct direction!

Collectives™ on Stack Overflow

Angular.js reuse partial for different data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related