AngularJS：隐藏yotube视频直到播放开始

我刚开始学习angularjs，需要帮助

我在angularJS应用程序的登录页上加载了两个视频，都嵌入了youtube上的iFrame。我从正在执行的json查询中获取iFrame。我有一个css3动画，我想在加载页面内容时显示它。加载动画应在iFrame加载并开始播放后消失。这一部分在播放开始后消失是最重要的。我的看法是：

<!--animation-->
<div class="logo hover">   
  <img class="blinkblink" src = 'images/image.jpg' alt="stuff" />
</div>
<!--content-->
<div ng-cloak>
    <div class="background-vid" ng-bind-html="model" ng-cloak></div>
    <div class="foreground-vid" ng-bind-html="player" ng-cloak></div>
    + MORE CONTENT
</div>

到我的控制器，并且还添加了

ng-if="visible"

对于视图中最外层的div来说，内容是隐藏的，动画是唯一可见的东西，但是内容在一段时间后没有显示出来

现在我的问题是，如何编辑或添加链接帖子中的代码，以便在两个视频开始播放时，动画隐藏，其余内容进入视图

---

谢谢大家，如果我需要更具体，或者如果我需要提供更多代码来获得必要的帮助，请告诉我

指令应该起到以下作用：

<div ng-if="loading">Loading...</div>
<iframe id="youtubeiframe" youtubeiframe></iframe>

app.controller('MyController', function($scope,$http) {
  $scope.loading = true;
});

app.directive('youtubeiframe',function() {
    return {
        restrict:'A',
        link: function(scope,element,attr) {
            var id = element.attr('id');
            document.getElementById(id).onload = function() {
                scope.$apply(function () {scope.loading = false});
            }
        }
    }
});

---

这是一个与相关问题无关的单独解决方案吗？我有点困惑，想知道这两者是否是独立的。不，可以使用指令来检测dom中的更改。在本例中，当iframe加载后。我编辑了答案，以提供一个更好的示例来说明其工作原理。这类操作有效，但页面内容显示时，一个youtube视频（暂时注释掉另一个）显示黑色加载屏幕。延迟能帮上忙吗？每个视频加载的延迟？

<div ng-if="loading">Loading...</div>
<iframe id="youtubeiframe" youtubeiframe></iframe>

app.controller('MyController', function($scope,$http) {
  $scope.loading = true;
});

app.directive('youtubeiframe',function() {
    return {
        restrict:'A',
        link: function(scope,element,attr) {
            var id = element.attr('id');
            document.getElementById(id).onload = function() {
                scope.$apply(function () {scope.loading = false});
            }
        }
    }
});