Question

我正在尝试使用AngularJS和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 bootstrap轮播代码 https://github.com/angular-ui/bootstrap/blob/master/src/carousel/carousel.js

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

Answer 1

问题是angular-ui-bootstrap的slide指令创建了一个孤立的范围，链接函数中的scope.$parent不是轮播范围，因此你可以＆＃39 ; t访问play和pause函数。

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

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

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

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

Angularjs自定义指令子范围访问父范围方法？

1 个答案: