Javascript AngularJs:在事件上更新$scope

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

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:

时间到了。德勤新改进的支出工具就在这里。
提交费用，简单到1-2-3-4
开始
--

---

事件被正确触发，但是$scope（在本例中是vm元素）似乎没有更新，因此没有再次显示元素。有什么想法吗？

您正在更新范围变量angular，脱离其上下文。Angular不会为此类更新运行摘要周期。在本例中，您正在从自定义事件更新范围变量，这不会影响UI上的摘要系统，因此不会触发摘要周期

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

您可以通过

$apply

在

$scope

上运行摘要循环，或者使用

$timeout

功能

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

});

---

您正在更新范围变量angular，脱离其上下文。Angular不会为此类更新运行摘要周期。在本例中，您正在从自定义事件更新范围变量，这不会影响UI上的摘要系统，因此不会触发摘要周期

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

您可以通过

$apply

在

$scope

上运行摘要循环，或者使用

$timeout

功能

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

});

三个问题

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

接下来…事件不在角度上下文中。每当angular范围外的代码更新时，您需要通知angular更新视图

最后

angular.element

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

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

三个问题

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

接下来…事件不在角度上下文中。每当angular范围外的代码更新时，您需要通知angular更新视图

最后

angular.element

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

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