仅在外部更改时触发 $watch

Question

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

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

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

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

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

$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，这正是您想要的。