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.