0

最初のangular.jsプロジェクトを開始したばかりで、ユーザーがモデルに値を設定するボタンをクリックする状況がありますが、今必要なのは、currentTimeプロパティを値に設定するhtmlビデオ要素と現在再生中の動画を一時停止します。

だから私が必要なのは

1）モデルを更新します（ng-clickで実行しました）

2）実行するjavascriptを実行します

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

この2番目のステップをどこから、どのようにトリガーする必要があるのか​​わかりません。

4

1 に答える 1

1

DOM操作を行うにはディレクティブを使用する必要があります。うまくいけば、videoElementはボタンと同じスコープにあります。その場合、モデルを$ watch（）するディレクティブを定義します。

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();
        })
      }
   }
})

videoElementが使用されているHTML要素にscopeプロパティを追加します。たとえば、ng-clickで操作するプロパティが$ scope.somePropertyの場合：

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

videoElementがボタンと同じスコープにない場合は、コードをコントローラーに配置できます。これは「角度のある方法」に反することを知っていますが、機能していることに満足しています::)

<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 に答える