Angular - Passing an object from one directive to another directive

Question

I am new to angular so apologies up front if a question is too newbie. I am trying to make a custom directive, and since I am already using an angular-youtube-embed directive, inside my new directive, I need to pass a player object from youtube-video directive, to my new directive, for the function playVideo in my scope to use it. I wonder how to do that? This is how my directive looks:

angular.module('coop.directives')
.directive('youtubePlayer', function () {
    return {
        restrict: 'E',
        scope: {
          videoPlaying: '=videoPlaying',
          playVideo: '&playVideo',
          playerVars: '=playerVars',
          article: '=article'
         },
        templateUrl : 'templates/youtube-player.html'
    };
}); 

This is my youtube-player.html:

<img ng-hide='videoPlaying' ng-src='http://i1.ytimg.com/vi/{{ article.external_media[0].video_id }}/maxresdefault.jpg' class='cover'>
<youtube-video ng-if='videoPlaying' video-url='article.external_media[0].original_url' player='player' player-vars='playerVars' class='video'></youtube-video>
<div ng-hide='videoPlaying' class='iframe-overlay' ng-click='playVideo({player: player})'>
  <img ng-hide='videoPlaying' class='play' src='icons/play.svg'/>
  <img ng-hide='videoPlaying' class='playButton' src='icons/playRectangle.svg'/>
</div>

And this is the function from the controller that I would like to use in my directive:

  $scope.playVideo = function(player) {
    $scope.videoPlaying = true;
    player.playVideo();
  };

Where player is an object of youtube-video directive that I am using from angular-youtube-embed package. So, whenever a user clicks on an element below, $scope.videoPlaying should become true and a playVideo() function should start the video:

<div ng-hide='videoPlaying' class='iframe-overlay' ng-click='playVideo(player)'>

This is how I call my directive in the view:

<youtube-player video-playing="videoPlaying" play-video="playVideo()" player-vars="playerVars" article="article"></youtube-player>

I should somehow pass a player object from youtube video to my new directive because now I get an error of:

ionic.bundle.js:26794 TypeError: Cannot read property 'playVideo' of undefined:

Answer 1

You can use $broadcast to achieve this.

Below is the diagram explaining the concept.

In youtubePlayer Directive use broadcast -

$rootscope.$broadcast('player-object', $scope.player);

And receive it in your custom directive.

$scope.$on('player-object', function (event, player) {
    $scope.videoPlaying = true;
    player.playVideo();
 });

Sample Example -http://jsfiddle.net/HB7LU/10364/

Answer 2

You can use '&' type for passing function in directives:

angular.module('coop.directives')
  .directive('youtubePlayer', function () {
    return {
        restrict: 'E',
        scope: {
          action: '&', //<- this type of parameter lets pass function to directives
          videoPlaying: '@videoPlaying',
          ...

so you directive will accept a parameter as a function, like this:

<coop.directives action="playVideo" videoPlaying="video" ...> </coop.directives>

and you'll be able to call that function normally:

      article: '=article'
     },
 template : "<img ng-hide='videoPlaying' ng-src='http://i1.ytimg.com/vi/{{ article.external_media[0].video_id }}/maxresdefault.jpg' class='cover'><youtube-video ng-if='videoPlaying' video-url='article.external_media[0].original_url' player='player' player-vars='playerVars' class='video'></youtube-video><div ng-hide='videoPlaying' class='iframe-overlay' ng-click='playVideo(player)'><img ng-hide='videoPlaying' class='play' src='icons/play.svg'/><img ng-hide='videoPlaying' class='playButton' src='icons/playRectangle.svg'/></div>",
    link: function (scope, element) {
      scope.action();
    }

Edit 1:

If none of those suggestions works, you can try to add () brackets to you action parameter action="playVideo()" or use '=' type parameter (but this way, your function will be double binded. In most cases you don't have to worry about it for functions, anyway).

You can find some examples in this old post: just try either solutions and find which one is working for your case.