javascript - AngularJs:更新事件的 $scope

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 上下文。每当代码超出 Angular 更新范围时，您需要告诉 Angular 更新 View

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

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