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

Question

我正在尝试使用 AngularJS 和 UI Bootstrap 创建一个轮播。由于 UI bootstrap 中的轮播只支持图片，所以我想编写自己的指令来支持 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 框架的新手。谢谢

Answer 1

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

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

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

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

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