javascript - Angular - 将对象从一个指令传递到另一个指令

Question

我是 Angular 的新手，所以如果问题太新手，请先道歉。我正在尝试制作自定义指令，因为我已经在使用 angular-youtube-embed指令，在我的新指令中，我需要将一个 player 对象从 youtube-video 指令传递到我的新指令，用于函数 playVideo在我的范围内使用它。我想知道该怎么做？ 这是我的指令的样子:

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

这是我的 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>

这是我想在我的指令中使用的来自 Controller 的函数:

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

player 是我在 angular-youtube-embed package 中使用的 youtube-video 指令的对象. 因此，每当用户点击下面的元素时，$scope.videoPlaying 应该变为 true 并且 playVideo() 函数应该开始播放视频:

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

这就是我在 View 中调用指令的方式:

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

我应该以某种方式将播放器对象从 youtube 视频传递到我的新指令，因为现在我收到以下错误:

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

Answer 1

您可以使用 $broadcast 来实现这一点。

下图解释了这个概念。

在 youtubePlayer 指令中使用广播 -

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

并在您的自定义指令中接收它。

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

示例 - http://jsfiddle.net/HB7LU/10364/