Onclick的视频应该使用angularjs打开弹出框

Question

Onclick的视频应该打开弹出窗口。在弹出窗口中应该播放视频，如果不需要，应该有关闭弹出窗口的选项。

任何人都可以请帮我对此...

我的HTML：

<div class="container-fluid" ng-controller="videocontroller"> 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h3> 
       <b>Video Segment</b> 
      </h3> 
     </div> 
     <div class="panel-body"> 
      <div ng-show="videoSources.length"> 
       <video width=176 height=99 
        style="margin-left: 70px; margin-right: 10px;" 
        ng-repeat="videoSource in videoSources | paginate:pageNum:pageSize track by $index" 
        controls ng-src="{{videoSource | trustUrl}}"> 
       </video> 
       <div style="margin-left: 46px;"> 
        <button style="margin-left: 750px" ng-disabled="isFirstPage()" 
         ng-click="prevPage()">Previous</button> 
        <button style="margin-left: auto;" ng-disabled="isLastPage()" 
         ng-click="nextPage()">Next</button> 
       </div> 
      </div> 
      <div ng-hide="videoSources.length"> 
       <a href="#" ng-click='loadVideos()'>Load videos</a> 
      </div> 

     </div> 

    </div> 

</div> 

我的JS：

app.controller(
     'videocontroller', 
     function($scope) { 

      $scope.pageNum = 0; 
      $scope.pageSize = 3; 
      $scope.isFirstPage = function() { 
       return $scope.pageNum === 0; 
      }; 
      $scope.isLastPage = function() { 
       return $scope.pageNum >= Math.floor($scope.videoSources.length 
         /$scope.pageSize); 
      }; 
      $scope.prevPage = function() { 
       $scope.pageNum--; 
      }; 
      $scope.nextPage = function() { 
       $scope.pageNum++; 
      }; 
      $scope.videoSources = [ 
        'http://Video/Digital_Hiring.mp4', 
        'http://Video/Digital_Hiring.mp4', 
        'http://Video/Digital_Hiring.mp4', 
        'http://Video/Digital_Hiring.mp4', 
        'http://Video/Digital_Hiring.mp4' ]; 


     }).filter("trustUrl", [ '$sce', function($sce) { 
    return function(recordingUrl) { 
     return $sce.trustAsResourceUrl(recordingUrl); 
    }; 
} ]).filter(
     'paginate', 
     function() { 
      console.log('creating paginate function', arguments); 
      return function(inputArray, pageNumber, pageSize) { 
       console.log('paginating', arguments); 
       pageNumber = pageNumber || 0; 
       pageSize = pageSize || 4; 
       if (!Array.isArray(inputArray)) 
        return inputArray; 
       return inputArray.slice(pageNumber * pageSize, (pageNumber + 1) 
         * pageSize); 
      }; 
     }); 

Answer 1

这是基于Angular ui-bootstrap模式一个可能的解决方案：

var app = angular.module('app', ['ngAnimate', 'ui.bootstrap']); 
 

 
app.controller('MainCtrl', function($scope, $log, $uibModal) { 
 

 
    $scope.open = function(size, videoSource) { 
 
    $log.info("open", videoSource); 
 
    var modalInstance = $uibModal.open({ 
 
     animation: $scope.animationsEnabled, 
 
     templateUrl: 'myModal.html', 
 
     controller: 'ModalInstanceCtrl', 
 
     backdrop: true, 
 
     size: size, 
 
     resolve: { 
 
     videoSource: function() { 
 
      return videoSource; 
 
     } 
 
     } 
 
    }); 
 

 
    modalInstance.result.then(function(result) { 
 
     // 
 
    }, function() { 
 
     $log.info('Modal dismissed at: ' + new Date()); 
 
    }); 
 
    }; 
 
    
 
    $scope.videoClick = function($event, videoSource) { 
 
    $log.info("videoClick", videoSource) 
 
    $scope.open('lg', videoSource); 
 
    }; 
 

 
}); 
 

 
app.controller('ModalInstanceCtrl', function($scope, $uibModalInstance, videoSource, $log) { 
 
    $log.info("ModalInstanceCtrl", videoSource); 
 
    
 
    $scope.id = Math.floor((Math.random() * 100) + 1); 
 
    $scope.videoSource = videoSource; 
 
    
 
    $scope.ok = function() { 
 
    $uibModalInstance.close('ok'); 
 
    }; 
 

 
    $scope.cancel = function() { 
 
    $uibModalInstance.dismiss('cancel'); 
 
    }; 
 
}); 
 

 
app.controller(
 
    'videocontroller', 
 
    function($scope) { 
 

 
    $scope.pageNum = 0; 
 
    $scope.pageSize = 3; 
 
    $scope.isFirstPage = function() { 
 
     return $scope.pageNum === 0; 
 
    }; 
 
    $scope.isLastPage = function() { 
 
     return $scope.pageNum >= Math.floor($scope.videoSources.length/$scope.pageSize); 
 
    }; 
 
    $scope.prevPage = function() { 
 
     $scope.pageNum--; 
 
    }; 
 
    $scope.nextPage = function() { 
 
     $scope.pageNum++; 
 
    }; 
 
    $scope.videoSources = [ 
 
     'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4', 
 
     'http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4', 
 
     'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4', 
 
     'http://Video/Digital_Hiring.mp4', 
 
     'http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4' 
 
    ]; 
 

 
}); 
 

 

 
app.filter("trustUrl", ['$sce', function($sce) { 
 
    return function(recordingUrl) { 
 
    return $sce.trustAsResourceUrl(recordingUrl); 
 
    }; 
 
}]); 
 

 
app.filter(
 
    'paginate', 
 
    function() { 
 
    console.log('creating paginate function', arguments); 
 
    return function(inputArray, pageNumber, pageSize) { 
 
     console.log('paginating', arguments); 
 
     pageNumber = pageNumber || 0; 
 
     pageSize = pageSize || 4; 
 
     if (!Array.isArray(inputArray)) 
 
     return inputArray; 
 
     return inputArray.slice(pageNumber * pageSize, (pageNumber + 1) * pageSize); 
 
    }; 
 
    });

<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>AngularJS Plunker</title> 
 
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" /> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script> 
 
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script> 
 
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 

 
    <div class="container-fluid" ng-controller="videocontroller"> 
 
    <div class="panel panel-default"> 
 

 
     <div class="panel-heading"> 
 
     <h3><b>Video Segment</b></h3> 
 
     </div> 
 
     <div class="panel-body"> 
 
     <div ng-show="videoSources.length"> 
 
      <video width=176 height=99 style="margin-left: 70px; margin-right: 10px;" 
 
      ng-repeat="videoSource in videoSources | paginate:pageNum:pageSize track by $index" ng-src="{{videoSource | trustUrl}}" 
 
      ng-click="videoClick($event, videoSource)"> 
 
      </video> 
 
      <div style="margin-left: 46px;"> 
 
      <button style="margin-left: 750px" ng-disabled="isFirstPage()" ng-click="prevPage()">Previous</button> 
 
      <button style="margin-left: auto;" ng-disabled="isLastPage()" ng-click="nextPage()">Next</button> 
 
      </div> 
 
     </div> 
 
     <div ng-hide="videoSources.length"> 
 
      <a href="#" ng-click='loadVideos()'>Load videos</a> 
 
     </div> 
 
     </div> 
 

 
    </div> 
 
    </div> 
 

 
    <script type="text/ng-template" id="myModal.html"> 
 
    <div id="my-modal-{{id}}" click-outside="cancel()"> 
 
     <div class="modal-header"> 
 
     <h3 class="modal-title">{{title}}</h3> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <div class="media"> 
 
      <video style="width:100%;height:100%;" controls autoplay ng-src="{{videoSource | trustUrl}}"></video> 
 
     </div> 
 
     
 
     <pre>src = {{videoSource | trustUrl}}</pre> 
 
     </div> 
 
     <div class="modal-footer"> 
 
     <button class="btn btn-primary" type="button" ng-click="ok()">OK</button> 
 
     <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button> 
 
     </div> 
 
    </div> 
 
    </script> 
 
</body> 
 

 
</html>