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();
                }
            });
        }
    };
}]);

Plunk：http ://plnkr.co/edit/xCSwsmFisoZA7SQtQuCg

ui 引导轮播代码 https://github.com/angular-ui/bootstrap/blob/master/src/carousel/carousel.js

请帮忙，告诉我我是否做错了。我是这个 angularjs 框架的新手。谢谢

4

1 回答 1

3

问题是slide来自 angular-ui-bootstrap 的指令创建了一个孤立的范围，scope.$parent在链接函数中不是轮播的范围，因此您无法访问play和pause函数。

在链接函数中，您可以通过调用scope()carousel 元素来获取轮播的范围：

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

然后，用于carouselScope替换您放置的位置scope.$parent。

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

于 2013-08-08T12:52:33.520 回答