Angularjs - 如何在单击其标题后加载图像/视频

Angularjs - how to load images/videos after clicking on its title

本文关键字：加载 图像 视频 标题 单击 Angularjs      更新时间：2023-09-26

我写了一个指令，当用户单击标题时会打开隐藏的细节，但我不确定使用角度指令加载图像的最佳策略是什么。我只想在用户单击其标题时加载图像（数组）和视频。我不想预加载图像/视频。

我创建了一个 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 中可用）
如果条件为 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>'
    }
})
相关文章：