0

我刚刚开始了我的第一个 angular.js 项目，并且遇到这样一种情况，用户单击一个按钮，该按钮在我的模型上设置了一个值，但我现在还需要 html 视频元素将其 currentTime 属性设置为一个值，并且当前正在播放的视频暂停。

所以我需要的是

1）更新我的模型（我已经通过 ng-click 完成了）

2）运行一些javascript

{
    $('videoElement')[0].currentTime = time (from my model);
     $('videoElement')[0].pause();
}

我不确定应该从哪里触发第二步以及如何触发？

4

1 回答 1

1

您应该使用指令来进行 DOM 操作。希望您的 videoElement 与您的按钮在同一范围内。如果是这样，定义一个 $watch()es 你的模型的指令：

angular.module('myModule', [])
.directive('pauseVideo', function() {
   return {
      scope: { someProperty: '@pauseVideo' },
      link: function(scope, element, attrs) {
        scope.$watch('someProperty', function(value) {
          var videoElement = $('videoElement')[0];
          videoElement.currentTime = time(value);
          videoElement.pause();
        })
      }
   }
})

将 scope 属性添加到使用 videoElement 的 HTML 元素。例如，如果您使用 ng-click 操作的属性是 $scope.someProperty：

<div id="videoElement" pause-video="someProperty">

如果 videoElement 与按钮不在同一范围内，您可以将代码放在您的控制器上，知道这违反了“Angular 方式”，但对您的工作感到满意：:)

<a ng-click="pauseVideo()">pause video</a>

在您的控制器中：

$scope.pauseVideo = function() {
    $scope.someProperty = ...;
    var videoElement = $('videoElement')[0];
    videoElement.currentTime = time (from my model);
    videoElement.pause();
}
于 2012-12-22T17:16:34.930 回答