javascript - 仅当外部更改时才触发 $watch

Question

我正在编写一个 Video 指令来封装 HTML5 视频标记并提供围绕它的基本绑定(bind)。

一切都很好，但我的 currentposition 属性有问题。

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

我允许用户绑定(bind)到此，以便为他们提供一种通过某些控件跳过视频的机制，但也可以读取该值以找出视频当前的位置。

在指令链接函数中，我观察此属性的更改并相应地更新我的视频的位置。

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

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

只要它仅用于查找视频而不是读取当前位置，就可以正常工作。一旦我在指令中设置当前位置，它就会触发 watch ，使其永久停留在当前位置。

解决这个问题的最佳方法是什么？我想过一些选择，但我都不喜欢其中任何一个

• 有两个属性，一个用于位置查找，一个用于位置读取
• 设置一个标志表示我在内部更新了属性，并忽略下一个 $watch 回调

Answer 1

您可以使用组件和单向绑定(bind)。

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 每当组件外部发生更改时就会调用，这正是您想要的。