如何在Angular-Bootstrap模式下播放视频？

Question

我基于资源的范围数组动态加载视频：

this.open = function (size, resource) {
    var modalInstance = $uibModal.open({
        templateUrl: 'playModal.html',
        controller: 'ModalInstanceCtrl',
        size: size,
        resolve: {
            resource: function () {
                return resource;
            }
        }
    });

    modalInstance.rendered.then(function () {
        $('#resource-video')[0].play();
    });
};

正如您所看到的，我正在使用jQuery选择器查找HTML5视频标记，并在模态的rendered事件的回调中播放它。要做到这一点并维护MVC纪律的“角度方式”是什么？

Answer 1

您可以创建一个原始的JavaScript“类”，它负责在给定原始dom元素的情况下操作视频。例如：

function VideoControl(videoElement) {
  this.videoElement = videoElement;
}

VideoControl.prototype.play = function() {
  this.videoElement.play();
}

VideoControl.prototype.pause = function() {
  this.videoElement.pause();
}

为了实例化它并实际将dom元素传递给它，您可以将它包装在一个指令中。例如：

app.directive('videoControl', function($parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var videoControlModel = $parse(attrs.videoControl);
      videoControlModel.assign(scope, new VideoControl(element[0]));
    }
  };
})

然后，您可以像这样使用此视频控制指令：

<button ng-click="videoControl.play()">Play</button>

<video  class="video" controls video-control="videoControl">
    ...
</video>

下面是一个有效的柱塞：https://plnkr.co/edit/2epHSCo6wwyCplNhOBSe?p=preview