Angularjs 自定义指令子作用域访问父作用域方法? [英] Angularjs custom directive child scope access parent scope method?

问题描述

我正在尝试使用 AngularJS ans UI Bootstrap 创建一个轮播.由于 UI 引导程序中的轮播仅支持图像，因此我想编写自己的指令来支持 youtube 视频.

我希望视频在视频幻灯片处于活动状态时开始播放，并在幻灯片处于非活动状态时暂停.另外，我想在播放视频时暂停轮播.到目前为止，我已经完成了第一部分，但无法暂停轮播，因为我无法访问轮播范围的暂停方法.

我的代码:

HTML

<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}}">

JS

.directive('youtube', ['youTubeService', function (youTubeService) {返回 {链接:函数(范围、元素、属性){var 播放器；var playerReady = false;var playerState;var 回调；函数创建播放器(){玩家 = 新 YT.Player(element[0], {宽度:450，高度:300，视频 ID:attrs.youtube，事件:{onReady:函数(事件){playerReady = 真；如果(回调！= null){打回来();}},onStateChange:函数(事件){playerState = event.data;if (playerState === YT.PlayerState.PAUSED) {//scope.$parent.play();}}}});}如果(youTubeService.ready){创建播放器()；} 别的 {scope.$on('youTubeServiceReady', function (event, args) {创建播放器()；});}scope.$watch('slide.active', function (active) {如果(活动){如果(玩家就绪){player.playVideo();//scope.$parent.pause();} 别的 {回调 = 函数 () {如果(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 框架的新手.谢谢

解决方案

问题是来自 angular-ui-bootstrap 的 slide 指令创建了一个隔离的作用域，scope.$parent链接函数中的不是carousel的作用域，因此你不能访问play和pause函数.

在链接函数中，你可以通过在carousel元素上调用scope()来获取carousel的作用域:

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

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

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

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.

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

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

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

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

解决方案

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

Then, use carouselScope to replace where you have put scope.$parent.

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

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