AngularJs: Updating $scope on event

Question

I have a video element, and I need to hide/show some elements when it is playing or in pause. This is part of the code, which should be enough for understanding:

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>

The events are being correctly triggered, but it seems the $scope, in this case the vm element, is not updating, thus, not showing again the elements. Any idea?

charlietfl · Accepted Answer · 2016-02-02 20:28:00Z

2

Three problems.

First this needs to be put in a directive so you are assured the element(s) exist(s) when the code is run

Next...the event is outside of angular context . Whenever code outside of angular updates scope you need to tell angular to update view

Last ... angular.element doesn't accept class selectors unless jQuery is included in page. Using directive also solves this issue since the element itself is exposed within directive as a jQlite or jQuery object

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

edited Feb 2, 2016 at 20:28

answered Feb 2, 2016 at 20:20

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Parkar · Accepted Answer · 2016-02-02 20:19:18Z

0

You are updating scope variable angular, out of its context. Angular doesn't run the digest cycle for those kind of updation. In this case you are updating scope variables from custom events, which doesn't intimate Angular digest system something has udpated on UI, resultant the digest cycle doesn't get fired.

You need to kick off digest cycle manually to update the bindings.

You could either run digest cycle by $apply over $scope OR use $timeout function.

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

});

answered Feb 2, 2016 at 20:19

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

AngularJs: Updating $scope on event

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related