使用 AngularJS 指令嵌入 Vimeo 视频

我在 AngularJS 应用程序中有一个部分 HTML 页面，我正在尝试向其中添加 vimeo 视频。该模板有一个图像和播放按钮，单击时会淡出以显示底层 iFrame。我还想要这个点击触发器来播放视频，这样就不必按两个播放按钮。

我的部分页面模板中发生这种情况的 div网站的工作版本在这里 http://bengal.missouri.edu/~wjg2q2/100_ages/app/#/100_Ages/1:

<div id="container" >

    <div id="dummy"></div>
    <div id="element">

    <iframe id="player" class="fade {{playerFade}}" ng-src="http://player.vimeo.com/video/{{person.video}}?api=1&amp;player_id=player&amp;wmode=opaque" frameborder="0" allowfullscreen></iframe>

    <img id="person_photo" class="fade {{person_photoFade}}" ng-src="{{person.photo_small}}" ng-src-responsive="[ [ '(min-width: 720px)', '{{person.photo_medium}}' ], [ '(min-width: 960px)', '{{person.photo_large}}' ], [ '(min-width: 1200px)', '{{person.photo_extralarge}}' ] ]" />

    <a id="playButton" ng-click="playing=true"  class="fade {{playButtonFade}}" ><img src="img/furniture/play.png" class="img_play" alt="play button"/></a>
    </div>

</div>

现在，我确实让它工作过一次，但那是在静态、非 Angular 网页上。我用来与 Vimeo API 交互的代码是从 SO#8444240 中获取的。他们试图找出预加载的方法。由于我有很多视频，我对此不感兴趣，我只是使用此代码来让我的按钮与我的视频进行交互。

我尝试将此脚本放入我的 index.html 页面中，但由于它已从 Angular 中删除，因此它根本不起作用。我想我需要一个指示。这是我当前的脚本代码：

<script>  

 //INIT Vimeo API

var vimeoPlayers = document.querySelectorAll('#player'),
    player;

for (var i = 0, length = vimeoPlayers.length; i < length; i++) {
    player = vimeoPlayers[i];
    $f(player).addEvent('ready', ready);
}

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else {
        element.attachEvent(eventName, callback, false);
    }
}

function ready(player_id) {
    // Keep a reference to Froogaloop for this player
    var container = document.getElementById(player_id).parentNode.parentNode, 
        froogaloop = $f(player_id);

    $('#playButton a').click(function(){

        $('#person_photo').fadeOut('12000');
        froogaloop.api('play');

        return false;   

    });                

}

</script>

我有一个控制播放按钮使其淡出的指令（感谢wmluke关于上一个问题 https://stackoverflow.com/questions/17205596/controller-doesnt-work-after-url-change）但我不知道如何将此 javascript 转换为指令。这也是我的控制器。

function DetailCtrl($scope, $routeParams, $http) {
  $http.get('person.json').success(function(data) {
    angular.forEach(data, function(person) {
          if (person.id == $routeParams.personId) 
            $scope.person = person;
        });
    });

  $scope.playing = false;

  // Update the *Fade scope attributes whenever the `playing` scope attribute changes
  $scope.$watch('playing', function (playing) {
        $scope.playerFade = playing ? 'in' : '';
        $scope.person_photoFade = playing ? '' : 'in';
        $scope.playButtonFade = playing ? '' : 'in';
  });

我尝试尽我所能编写此指令，但我不知道如何处理对 Vimeo API 的就绪调用。 Angular 似乎有更好的方法来做到这一点。