Question

我刚刚开始使用angularjs，我需要帮助。

我正在加载两个视频，这些视频都来自youtube，在我的angularJS应用的着陆页中嵌入了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-cloak directive gets removed too early

一旦我添加了

，这在某种程度上是有帮助的

$scope.visible = false;

到我的控制器并添加了

ng-if="visible"

在我看来，对于我最外层的div，内容从视图中隐藏，动画是唯一可见的内容，但内容在一段时间后才显示出来。

现在这是我的问题，我如何编辑，或者我可以添加什么来添加我已经链接的帖子中的代码，以便在动画隐藏的两个视频上开始播放时，以及其余的内容进入视野？

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

Answer 1

指令应该可以解决问题：

<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});
            }
        }
    }
});

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

1 个答案: