I wrote a directive which opens hidden details when user clicks the title, but I'm not sure what is the best strategy to load images using angular directive. I'd like to only load images(array) and videos if user clicks on its title. I don't want to preload images/videos.
I have created a jsfiddle.
<body ng-app="App">
<div ng-controller="MoviesCtrl">
<div ng-repeat="movie in movies" data-movies></div>
</div>
</body>
<script>
angular.module('App', []).
// sample data
controller('MoviesCtrl', function($scope){
$scope.movies =[
{
'title': 'Despicable Me 2',
'images':['http://upload.wikimedia.org/wikipedia/en/d/db/Despicable_Me_Poster.jpg', 'http://intl.despicableme.com/splashpage/images/centergraphic.jpg'],
'video': 'XQG89cwhmJU'
},
{
'title': ' Monsters University',
'images': ['http://upload.wikimedia.org/wikipedia/en/2/2a/Monsters_University_poster_3.jpg'],
'video': 'ODePHkWSg-U'
}
]
}).
directive('movies', function(){
return {
template: '{{movie.title}}'+
'<div class="movieInfo"><h2>{{movie.title}}</h2>' +
'<img src="{{image}}" ng-repeat="image in movie.images"><br>' +
'<iframe src="http://www.youtube.com/embed/{{movie.video}}"></iframe></div>',
link: function(scope, elem, attrs){
elem.bind('click', function(){
// load image/video now
elem.find('.movieInfo').toggle();
})
}
}
})
</script>
Use ng-if (available in AngularJS 1.1.5)
This directive will not render element at all, if condition is false.
http://jsfiddle.net/dUz5a/5/
directive('movies', function(){
return {
template: '<div ng-click="movie.show=!movie.show">{{movie.title}}</div>'+
'<div ng-if="movie.show"><h2>{{movie.title}}</h2>' +
'<img ng-src="{{image}}" ng-repeat="image in movie.images"><br>' +
'<iframe ng-src="http://www.youtube.com/embed/{{movie.video}}"></iframe></div>'
}
})
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments