Question

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

主屏幕：

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

控制器我在哪里指定什么模型有什么数据：

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

Angular.js为不同的数据重用partial

1 个答案: