我写了一个指令，当用户单击标题时该指令会打开隐藏的细节，但是我不确定使用angular指令加载图像的最佳策略是什么。如果用户单击标题，我只想加载图像（数组）和视频。我不想预加载图像/视频。
我创建了一个jsfiddle。
http://jsfiddle.net/ZdyP2/9/
<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>
最佳答案
使用ng-if（在AngularJS 1.1.5中可用）
如果condition为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>'
}
})
关于javascript - Angular.js-单击标题后如何加载图像/视频，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19084371/