Question

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

我创建了一个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>

Answer 1

使用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>'
    }
})

Angularjs - 点击标题后如何加载图片/视频

1 个答案: