0

AngularJS ans UI Bootstrap でカルーセルを作成しようとしています。UI ブートストラップのカルーセルは画像のみをサポートするため、YouTube ビデオをサポートする独自のディレクティブを作成したいと考えています。

ビデオ スライドがアクティブなときにビデオの再生を開始し、スライドがアクティブでないときに一時停止します。また、ビデオの再生中にカルーセルのロッピングを一時停止したいと思います。これまでのところ、最初の部分は完了しましたが、カルーセル スコープの一時停止メソッドにアクセスできないため、カルーセルを一時停止できません。

私のコード:

HTML

<div carousel interval="5000">
    <div slide ng-repeat="slide in slides" active="slide.active">
        <img ng-if="slide.image" ng-src="{{slide.image}}" />
        <div ng-if="slide.video" youtube="{{slide.video}}">
        </div>
    </div>
</div>

JS

.directive('youtube', ['youTubeService', function (youTubeService) {
    return {
        link: function (scope, element, attrs) {
            var player;
            var playerReady = false;
            var playerState;
            var callback;

            function createPlayer() {
                player = new YT.Player(element[0], {
                    width: 450,
                    height: 300,
                    videoId: attrs.youtube,
                    events: {
                        onReady: function (event) {
                            playerReady = true;
                            if (callback != null) {
                                callback();
                            }
                        },
                        onStateChange: function (event) {
                            playerState = event.data;
                            if (playerState === YT.PlayerState.PAUSED) {
                                //scope.$parent.play();
                            }
                        }
                    }
                });
            }

            if (youTubeService.ready) {
                createPlayer();
            } else {
                scope.$on('youTubeServiceReady', function (event, args) {
                    createPlayer();
                });
            }

            scope.$watch('slide.active', function (active) {
                if (active) {
                    if (playerReady) {
                        player.playVideo();
                        //scope.$parent.pause();
                    } else {
                        callback = function () {
                            if (scope.slide.active) {
                                player.playVideo();
                                //scope.$parent.pause();
                            }
                        }
                    }
                } else if (playerReady && (playerState == YT.PlayerState.BUFFERING || playerState == YT.PlayerState.PLAYING)) {
                    player.pauseVideo();
                }
            });
        }
    };
}]);

プランク: http://plnkr.co/edit/xCSwsmFisoZA7SQtQuCg

Ui ブートストラップ カルーセル コード https://github.com/angular-ui/bootstrap/blob/master/src/carousel/carousel.js

助けてください、私が間違っているかどうか教えてください。このangularjsフレームワークは初めてです。ありがとう

4

1 に答える 1

3

問題は、slideangular-ui-bootstrap からのディレクティブが分離されたスコープを作成したことです。リンク関数ではカルーセルのスコープではないため、関数scope.$parentにアクセスできません。playpause

scope()リンク関数では、カルーセル要素を呼び出すことでカルーセルのスコープを取得できます。

var carouselScope = element.parent().parent().scope();

次に、 を使用carouselScopeして、配置した場所を置き換えますscope.$parent。

http://plnkr.co/edit/1HCiqvTm1Fd9Rh0o8Mtw

于 2013-08-08T12:52:33.520 に答える