0

I am writing a Video directive to encapsulate the HTML5 video tag and provide basic binding around it.

It all works great but I have a problem with the currentposition property.

<my-video currentposition="$ctrl.currentVideoPosition"></my-video>

I allow a user to bind to this to provide a mechanism for them to skip the video via some controls, but to also read the value to find out where the video currently is.

In the directive link function I watch this property for changes and update my video's position accordingly. 

$scope.$watch(() => { return $scope.currentposition; }, () => {
    var videoElement = $element.find("video");

    (videoElement[0] as any).currentTime = $scope.currentposition;
});

This works fine so long as it is only used for seeking the video and not for reading the current position. As soon as I set the current position within the directive it fires the watch causing it to permanently stick at the current position.

What is the best way around this? Some options I have thought of but I'm not fond of either of them

  • Have two properties, one for position seek, one for position read
  • Set a flag to say that I updated the property internally, and ignore the next $watch callback
Chris
  • 26,744
  • 48
  • 193
  • 345

1 Answers1

1

You can use component and one-way binding.

module.component('myVideo', {
  bindings: {
              currentposition: '<'
            },
  controller: class MyVideoController {
                $onChanges(changes) {
                  if (changes.currentposition) {
                    var videoElement = $element.find("video");
                    (videoElement[0] as any).currentTime = this.currentposition;        
                  }
               }
              }

$onChanges is called whenever a change happens outside the component, exactly what you want.

a better oliver
  • 26,330
  • 2
  • 58
  • 66
  • So one way binding allows either the parent scope or the internal scope to change a value. Except that only changes from the parent scope will initiate an onChange event? How would the parent scope know when the currentPosition has moved on then if internal changes don't initiate a change event? – Chris Sep 02 '16 at 11:23