简体   繁体   中英

Angular.js reuse partial for different data

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM