Angularjs定制指令子作用域访问父范围的方法？ [英] Angularjs custom directive child scope access parent scope method?

问题描述

我试图创建AngularJS ANS UI引导旋转木马。由于在UI的旋转木马引导程序只支持图片，我婉写我自己的指令，支持YouTube视频。

I am trying to create a carousel with AngularJS ans UI Bootstrap. Since the carousel in UI bootstrap only supports images, I wan to write my own directive to support youtube video.

我想要的视频开始播放时视频幻灯片处于活动状态，当滑动不活跃暂停。此外，我想暂停时播放视频时的旋转木马截枝。到目前为止，我已经完成了第一部分，但不能暂停旋转木马，因为我不能访问旋转木马范围的停顿方法。

I want the video to start to play when the video slide is active, and pause when the slide is not active. Also I would like to pause the carousel lopping when the video is playing. So far i have done the first part but can't pause the carousel because i can't access the pause method of the carousel scope.

我的code：

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引导旋转木马code
https://github.com/angular-ui/bootstrap /blob/master/src/carousel/carousel.js

Ui bootstrap carousel code https://github.com/angular-ui/bootstrap/blob/master/src/carousel/carousel.js

请帮帮忙，告诉我，如果我做错了。我是新来这个angularjs framework.Thanks

Please help, tell me if i'm doing wrong. I'm new to this angularjs framework.Thanks

推荐答案

现在的问题是，从角UI的自举的幻灯片指令创造了一个孤立的范围，范围。$父中的链接功能不旋转木马的范畴，因此，你不能访问播放和暂停功能。

The problem is that the slide directive from angular-ui-bootstrap has created an isolated scope, scope.$parent in the link function isn't the scope of carousel, therefore you can't access play and pause functions.

在链接功能，您可以通过调用范围（）旋转木马元素得到传送带的作用范围：

In link function, you can get the carousel's scope by calling scope() on carousel element:

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

然后，使用 carouselScope 来代替，你已经把范围。$父。

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

这篇关于Angularjs定制指令子作用域访问父范围的方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！