1

ユーザーがタイトルをクリックしたときに非表示の詳細を開くディレクティブを作成しましたが、角度ディレクティブを使用して画像をロードするための最良の戦略がわかりません。ユーザーがタイトルをクリックした場合にのみ、画像 (配列) とビデオをロードしたいと思います。画像や動画をプリロードしたくありません。

私は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>
4

1 に答える 1