Angularjs custom directive child scope access parent scope method?

Question

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

Include relevant code to make your question self-contained.

Ye Liu
– Ye Liu

2013-08-08 11:08:25 +00:00
Commented Aug 8, 2013 at 11:08 — Ye Liu
– Ye Liu, Commented Aug 8, 2013 at 11:08

Ye Liu · Accepted Answer · 2013-08-08 12:52:33Z

3

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

answered Aug 8, 2013 at 12:52

Ye Liu

8,9861 gold badge40 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lucius Over a year ago

what's the difference between element.parent().scope() and scope.$parent? An isolated scope doesn't have a parent??

Michael Benford Over a year ago

An isolated scope doesn't prototypically inherit from the parent scope. That's for preventing the directive from accidentally reading or modifying data in the parent scope.

Collectives™ on Stack Overflow

Angularjs custom directive child scope access parent scope method?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related