Following are the template and the consumer of the template. <gallery> is the directive I am trying to create.
TestCarousel.html
<html ng-app="imageCarouselModule" >
<head>
<meta charset="utf-8">
<title>Test Carousel</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<!-- <link rel="stylesheet" href="style.css">-->
<script src ="imageCarousel.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script>
var app=angular.module('imageCarouselModule',[]);
app.controller('MainController',function($scope){
$scope.images=[{"src":"http://t3.gstatic.com/images?q=tbn:ANd9GcR1Kp2JmcnxhBOf66aN_JqMWl3h_okOQKFX_kEqwr9mRe5iPomy"},
{"src":"http://t3.gstatic.com/images?q=tbn:ANd9GcQAoT9UmjmunwFTAA19_n1auOFR_JG017_TUru-E91T7nIH8HyU", },
{"src":"http://t2.gstatic.com/images?q=tbn:ANd9GcTfntbVv3pl5wFCe6IdkaMVrme_Au9TD8Z_xE95Ezv6jz8oK4nT", },
{"src":"http://t1.gstatic.com/images?q=tbn:ANd9GcSAOralDJGSVtfirbHG5VdFqG8fTqXMh7C4Xd_aHCy176SKNQqK", },
{"src":"http://fc08.deviantart.net/fs70/f/2012/122/0/c/landscape_wallpaper_by_nickchoubg-d4yaep3.png", }
];
$scope.action=function(image){
$scope.selectedImage = image;
};
});
app.directive('gallery',function(){
return{
templateUrl:'imgCarousel.html',
scope:{images:'=',
action:'&',},
link:function postLink(scope, element, attrs){
$scope.selectedImage=$scope.images[0];
}
};
});
</script>
<body ng-controller="MainController">
</body>
<gallery images="images" ></gallery>
</head>
</html>
imgCarousel.html
<div>
<div>
<img ng-src="{{selectedImage.src}}"/>
</div>
<ul>
<li ng-repeat="image in images">
<img ng-src="{{image.src}}" ng-click="action(image)">
</ul>
</div>
I am trying to use the event listeners on the directive.
Aucun commentaire:
Enregistrer un commentaire