仅在外部更改时触发 $watch

Question

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

一切正常，但我有一个问题 currentposition 属性。

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

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

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

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

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

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

最好的解决方法是什么？有些选项我已经想到了，但我都不喜欢它们中的任何一个

有两个属性，一个是定位，一个是读取
设置一个标志，表明我在内部更新了属性，并忽略下一个 $watch 回调

Answer 1

您可以使用 component 和单向绑定。

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

仅在外部更改时触发 $watch

Fire $watch only when changed externally

javascript

directive

watch

angularjs