视频中的onclick应使用angularjs打开弹出框 [英] Onclick of a video should open the popup box using angularjs

查看：118
本文介绍了视频中的onclick应使用angularjs打开弹出框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

视频中的onclick应打开window.In弹出的窗口中视频应该打，应该有用于关闭弹出窗口，如果没有必要的选项弹出。

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

我的HTML：

 ＆LT; D​​IV CLASS =集装箱液NG控制器=视频控制器＆GT;
    ＆LT; D​​IV CLASS =面板面板默认＆GT;
        ＆LT; D​​IV CLASS =面板标题＆GT;
            ＆LT; H3＆GT;
                ＆LT; B＆GT;视频段＆LT; / B＆GT;
            ＆LT; / H3 GT＆;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =面板体＆GT;
            ＆LT; D​​IV NG秀=videoSources.length＆GT;
                ＆lt;视频宽度= 176高度= 99
                    风格=保证金左：70像素;保证金右：10px的;
                    NG-重复=videoSource在videoSources | PAGINATE：页次：由$指数pageSize的曲目
                    控制NG-SRC ={{videoSource | trustUrl}}＆GT;
                ＆LT; /视频＆GT;
                ＆LT; D​​IV的风格=保证金左：46px;＆GT;
                    ＆LT;按钮样式=保证金左：750pxNG残疾=isFirstPage（）
                        NG-点击=prevPage（）＆GT; previous＆LT; /按钮＆GT;
                    ＆LT;按钮样式=保证金左：汽车; NG-禁用=isLastPage（）
                        NG-点击=下一页（）＆gt;接下来＆LT; /按钮＆GT;
                ＆LT; / DIV＆GT;
            ＆LT; / DIV＆GT;
            ＆LT; D​​IV NG隐藏=videoSources.length＆GT;
                ＆LT; A HREF =＃NG点击='loadVideos（）'＆GT;加载视频＆LT; / A＆GT;
            ＆LT; / DIV＆GT;        ＆LT; / DIV＆GT;    ＆LT; / DIV＆GT;＆LT; / DIV＆GT;

我的JS：

  app.controller（
        视频控制器，
        功能（$范围）{            $ scope.pageNum = 0;
            $ scope.pageSize = 3;
            $ scope.isFirstPage =功能（）{
                返回$ scope.pageNum === 0;
            };
            $ scope.isLastPage =功能（）{
                返回$ scope.pageNum＆GT; = Math.floor（$ scope.videoSources.length
                        / $ scope.pageSize）;
            };
            $范围。prevPage =功能（）{
                $ scope.pageNum--​​;
            };
            $ scope.nextPage =功能（）{
                $ 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'];
        }）。过滤器（trustUrl，['$ SCE'，函数（$ SCE）{
    复位功能（recordingUrl）{
        返回$ sce.trustAsResourceUrl（recordingUrl）;
    };
}]）。过滤（
        分页，
        功能（）{
            的console.log（'创建PAGINATE功能，参数）;
            返回功能（inputArray，PAGENUMBER，pageSize的）{
                的console.log（'分页'，参数）;
                PAGENUMBER = PAGENUMBER || 0;
                的pageSize = ||的pageSize 4;
                如果（！Array.isArray（inputArray））
                    返回inputArray;
                返回inputArray.slice（PAGENUMBER * pageSize的，（PAGENUMBER + 1）
                        * pageSize的）;
            };
        }）;


解决方案

下面是一个基于一个可能的解决方案角UI的引导模式：

\r
\r

VAR应用= angular.module（'应用'，['ngAnimate'，' ui.bootstrap']）;\r
\r
app.controller（'MainCtrl'，函数（$范围，$日志$ uibModal）{\r
\r
  $ scope.open =功能（大小，videoSource）{\r
    $ log.info（开放，videoSource）;\r
    VAR modalInstance = $ uibModal.open（{\r
      动画：$ scope.animationsEnabled，\r
      templateUrl：myModal.html'，\r
      控制器：'ModalInstanceCtrl'，\r
      背景：真实，\r
      大小：大小，\r
      解析：{\r
        videoSource：功能（）{\r
          返回videoSource;\r
        }\r
      }\r
    }）;\r
\r
    modalInstance.result.then（功能（结果）{\r
      //\r
    }，函数（）{\r
      $ log.info（'模态在驳回：+新的Date（））;\r
    }）;\r
  };\r
  \r
  $ scope.videoClick =功能（$事件，videoSource）{\r
    $ log.info（videoClick，videoSource）\r
    $ scope.open（'LG'，videoSource）;\r
  };\r
\r
}）;\r
\r
app.controller（'ModalInstanceCtrl'，函数（$范围，$ uibModalInstance，videoSource，$日志）{\r
  $ log.info（ModalInstanceCtrl，videoSource）;\r
  \r
  $ scope.id = Math.floor（（的Math.random（）* 100）+ 1）;\r
  $ scope.videoSource = videoSource;\r
  \r
  $ scope.ok =功能（）{\r
    $ uibModalInstance.close（'OK'）;\r
  };\r
\r
  $ scope.cancel =功能（）{\r
    $ uibModalInstance.dismiss（'取消'）;\r
  };\r
}）;\r
\r
app.controller（\r
  视频控制器，\r
  功能（$范围）{\r
\r
    $ scope.pageNum = 0;\r
    $ scope.pageSize = 3;\r
    $ scope.isFirstPage =功能（）{\r
      返回$ scope.pageNum === 0;\r
    };\r
    $ scope.isLastPage =功能（）{\r
      返回$ scope.pageNum＆GT; = Math.floor（$ scope.videoSources.length / $ scope.pageSize）;\r
    };\r
    $范围。prevPage =功能（）{\r
      $ scope.pageNum--​​;\r
    };\r
    $ scope.nextPage =功能（）{\r
      $ scope.pageNum ++;\r
    };\r
    $ scope.videoSources = [\r
      http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4'，\r
      http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4'，\r
      http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4'，\r
      的http：//Video/Digital_Hiring.mp4'，\r
      http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4\r
    ];\r
\r
}）;\r
\r
\r
app.filter（trustUrl，['$ SCE'，函数（$ SCE）{\r
  复位功能（recordingUrl）{\r
    返回$ sce.trustAsResourceUrl（recordingUrl）;\r
  };\r
}]）;\r
\r
app.filter（\r
  分页，\r
  功能（）{\r
    的console.log（'创建PAGINATE功能，参数）;\r
    返回功能（inputArray，PAGENUMBER，pageSize的）{\r
      的console.log（'分页'，参数）;\r
      PAGENUMBER = PAGENUMBER || 0;\r
      的pageSize = ||的pageSize 4;\r
      如果（！Array.isArray（inputArray））\r
        返回inputArray;\r
      返回inputArray.slice（PAGENUMBER * pageSize的，（PAGENUMBER + 1）* pageSize的）;\r
    };\r
  }）;

\r

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML NG-应用=应用程序＆GT;\r
\r
＆LT; HEAD＆GT;\r
  ＆LT;间的charset =UTF-8/＆GT;\r
  ＆LT;标题＆GT; AngularJS Plunker＆LT; /标题＆GT;\r
  ＆LT;链路数据需要=bootstrap-css@3.3.6数据semver =3.3.6的rel =stylesheet属性HREF =htt​​ps://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css /bootstrap.css/＆GT;\r
  ＆LT;链接rel =stylesheet属性HREF =style.css文件/＆GT;\r
  ＆所述;脚本数据需要=angular.js@1.4.xSRC =的https：//$c$c.angularjs.org/1.4.8/angular.js数据semver =1.4.8＆GT ;＆LT; / SCRIPT＆GT;\r
  ＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js\"></script>\r
  ＆LT;脚本的src =// angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js\"></script>\r
  ＆所述; SCRIPT SRC =app.js＆GT;＆下; /脚本＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;机身NG控制器=MainCtrl＆GT;\r
\r
  ＆LT; D​​IV CLASS =集装箱液NG控制器=视频控制器＆GT;\r
    ＆LT; D​​IV CLASS =面板面板默认＆GT;\r
\r
      ＆LT; D​​IV CLASS =面板标题＆GT;\r
        ＆LT; H3＆GT;＆LT; B＆GT;视频段＆LT; / B＆GT;＆LT; / H3 GT＆;\r
      ＆LT; / DIV＆GT;\r
      ＆LT; D​​IV CLASS =面板体＆GT;\r
        ＆LT; D​​IV NG秀=videoSources.length＆GT;\r
          ＆lt;视频宽度= 176高度= 99 =风格保证金左：70像素;保证金右：10px的;\r
            NG-重复=videoSource在videoSources | PAGINATE：页次：由$指数pageSize的曲目NG-SRC ={{videoSource | trustUrl}}\r
            NG-点击=videoClick（$事件，videoSource）＆GT;\r
          ＆LT; /视频＆GT;\r
          ＆LT; D​​IV的风格=保证金左：46px;＆GT;\r
            ＆LT;按钮样式=保证金左：750pxNG残疾=isFirstPage（）NG点击=prevPage（）＆GT; previous＆LT; /按钮＆GT;\r
            ＆LT;按钮样式=保证金左：汽车; NG-禁用=isLastPage（）NG点击=下一页（）＆gt;接下来＆LT; /按钮＆GT;\r
          ＆LT; / DIV＆GT;\r
        ＆LT; / DIV＆GT;\r
        ＆LT; D​​IV NG隐藏=videoSources.length＆GT;\r
          ＆LT; A HREF =＃NG点击='loadVideos（）'＆GT;加载视频＆LT; / A＆GT;\r
        ＆LT; / DIV＆GT;\r
      ＆LT; / DIV＆GT;\r
\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
\r
  ＆LT;脚本类型=文/ NG-模板ID =myModal.html＆GT;\r
    ＆LT; D​​IV ID =我的模态 - {{ID}}点击外=取消（）＆GT;\r
      ＆LT; D​​IV CLASS =模头＆GT;\r
        ＆LT; H3类=模式标题＆GT;的{{title}}＆LT; / H3 GT＆;\r
      ＆LT; / DIV＆GT;\r
      ＆LT; D​​IV CLASS =模体＆GT;\r
        ＆LT; D​​IV CLASS =媒体＆GT;\r
          ＆lt;视频风格=宽度：100％;身高：100％;控制自动播放NG-SRC ={{videoSource | trustUrl}}＆GT;＆LT; /视频＆GT;\r
        ＆LT; / DIV＆GT;\r
        \r
        ＆LT; pre＆GT; SRC = {{videoSource | trustUrl}}＆LT; / pre＆GT;\r
      ＆LT; / DIV＆GT;\r
      ＆LT; D​​IV CLASS =模式躯＆GT;\r
        ＆LT;按钮类=BTN BTN-主要型=按钮NG点击=OK（）＆GT;确定＆LT; /按钮＆GT;\r
        ＆LT;按钮类=BTN BTN-警告型=按钮NG点击=取消（）＆GT;取消＆LT; /按钮＆GT;\r
      ＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / SCRIPT＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;

\r

\r
\r

Onclick of a video should open the popup window.In the popup window the video should be playing and should have an option for closing the popup window,if not needed.

Can anyone please help me out regarding this ...

My 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>

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

解决方案

Here is a possible solution based on Angular ui-bootstrap modal:

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>

这篇关于视频中的onclick应使用angularjs打开弹出框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
JavaScript最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆