Question

我有一个视频元素，我需要在播放或暂停时隐藏/显示一些元素。这是代码的一部分，应该足以理解：

var videoElement = angular.element('.onboardinghome-view__video video');
var vm = this;
vm.playVideo = playVideo;
vm.hideQuickSetup = false;
vm.hideVideoCaption = false;
vm.hidePlayButton = true;


videoElement.on('canplay',function() {
  vm.hidePlayButton = false;
});
videoElement.on('pause',function() {
  vm.hideVideoCaption = false;
});

function playVideo() {
  vm.hideVideoCaption = true;
  videoElement[0].play();
}

HTML：

<header id="#">
  <div class="grid grid__col-6">
    <div ng-hide="vm.hideVideoCaption">
      <h5>The time has come. Deloitte's new improved expense tool is here.</h5>
      <h4>Submitting expenses, easy as 1-2-3-4</h4>
      <div class="onboardinghome-view__play-button" ng-click="vm.playVideo()"></div>
      <div>GET STARTED</div>
      <div><p><a href="#onboarding_setup_preferences">Setup preferences for faster expense submission</a> - <a href="#onboarding_easy_expense">Easier expense entry</a> - <a href="#onboarding_learn_new_dte">Learn about the new DTE</a></p></div>
    </div>
    <div class="grid__col-12 onboardinghome-view__video">
      <video controls>
          <source ng-src="images/dte_video.mp4" type="video/mp4">
      </video>
    </div>
  </div>

</header>

事件被正确触发，但似乎$ scope，在这种情况下是vm元素，没有更新，因此，不再显示元素。有什么想法吗？

Answer 1

三个问题。

首先需要将它放在一个指令中，以便在运行代码时确保元素存在

接下来......事件超出了角度背景。每当角度更新范围之外的代码时，您需要告诉angular更新视图

Last ... angular.element不接受类选择器，除非页面中包含jQuery。 Using指令也解决了这个问题，因为元素本身在指令中作为jQlite或jQuery对象公开

videoElement.on('pause',function() {
  vm.hideVideoCaption = false;
  $scope.$apply()
});

Answer 2

您正在更新范围变量angular，超出其上下文。对于那种更新，Angular不会运行摘要周期。在这种情况下，您正在从自定义事件更新范围变量，这不会影响Angular摘要系统在UI上显示的内容，从而导致摘要周期不会被触发。

您需要手动启动摘要周期以更新绑定。

您可以$apply对$scope 或使用$timeout函数运行摘要周期。

videoElement.on('canplay',function() {
   $timeout(function(){
      vm.hidePlayButton = false;
   })
});
videoElement.on('pause',function() {
   $timeout(function(){
      vm.hideVideoCaption = false;
   })

});

AngularJs：在事件上更新$ scope

2 个答案: