javascript - Angular.js 对不同数据重用部分内容

Question

我正在尝试重用相同的部分来显示数据。我想使用该模板在屏幕左侧显示女孩获胜者，在右侧显示男孩获胜者。不幸的是，数据没有显示在模板中，所以我假设我没有正确传递它。是否可以重复使用相同的模板而不需要像 http://jsfiddle.net/api/post/library/pure/ 中所述的指令。 ？该模板中将显示更多信息。这是我尝试使用 Angular 的第二个项目，因此非常感谢您的建议。谢谢

主屏幕:

<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>

模板:

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

Controller ，我在其中指定什么模型有什么数据:

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

Answer 1

因此，为了结束这个问题，使用指令的最终解决方案:

主屏幕:

<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>

模板:

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

和指令:

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