如何在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> 

這裏是一個工作plunker：https://plnkr.co/edit/2epHSCo6wwyCplNhOBSe?p=preview