AngularJS中使用ngModal模态框实例


Posted in Javascript onMay 27, 2017

在AngularJS中使用模态框需要引用的文件:

  1. angular.js 1.5.5
  2. ui.bootstrap-tpls.js 0.11.2
  3. bootstrap.css 3.3.7

需要注意版本要一致,高版本的不支持这种方法,会出错

将需要弹出的模态框的内容写在 script 标签中,指明属性,放在页面中

<script type="text/ng-template" id="modal.html"> 
<div>
  <div class="modal-header">
    <h3 class="modal-title" align="center">
      标题信息
    </h3>
  </div>
  <div class="modal-body">
    <div align="center">
      模态框内容
    </div>
  </div>
  <div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">
      确认
    </button>
    <button class="btn btn-warning" ng-click="cancel()">
      退出
    </button>
  </div>
</div>
</script>

在App和Controller中注入模态框

var app = angular.module('app', ['ui.bootstrap']);
app.controller('modalController', function($scope, $rootScope,$modal) {
  $scope.openModel = function() {
      var modalInstance = $modal.open({
        templateUrl : 'modal.html',//script标签中定义的id
        controller : 'modalCtrl',//modal对应的Controller
        resolve : {
          data : function() {//data作为modal的controller传入的参数
             return data;//用于传递数据
          }
        }
      })
    }
}

//模态框对应的Controller
app.controller('modalCtrl', function($scope, $modalInstance, data) {
  $scope.data= data;

  //在这里处理要进行的操作  
  $scope.ok = function() {
    $modalInstance.close();
  };
  $scope.cancel = function() {
    $modalInstance.dismiss('cancel');
  }
});

添加事件触发显示模态框

<button ng-click="openModal()">打开模态框</button>

html

<!DOCTYPE html>
<html ng-app="app" ng-controller="modalController">
<head>
  <title>ng-model模态框</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<body>
<button ng-click="openModal()">打开模态框</button>

<script type="text/ng-template" id="modal.html"> 
  <div>
    <div class="modal-header">
      <h3 class="modal-title" align="center">
        标题信息
      </h3>
    </div>
    <div class="modal-body">
      <div align="center">
        模态框内容 <br>
        {{data}}
      </div>
    </div>
    <div class="modal-footer">
      <button class="btn btn-primary" ng-click="ok()">
        确认
      </button>
      <button class="btn btn-warning" ng-click="cancel()">
        退出
      </button>
    </div>
  </div>
</script>

<script src="https://cdn.bootcss.com/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>

<script type="text/javascript">
  var app = angular.module('app', ['ui.bootstrap']);
  app.controller('modalController', function($scope, $rootScope, $modal) {
    var data = "通过modal传递的数据";
    $scope.openModal = function() {
        var modalInstance = $modal.open({
          templateUrl : 'modal.html',//script标签中定义的id
          controller : 'modalCtrl',//modal对应的Controller
          resolve : {
            data : function() {//data作为modal的controller传入的参数
               return data;//用于传递数据
            }
          }
        })
      }
  })
   //模态框对应的Controller
   app.controller('modalCtrl', function($scope, $modalInstance, data) {
     $scope.data= data;

     //在这里处理要进行的操作
     $scope.ok = function() {
       $modalInstance.close();
     };
     $scope.cancel = function() {
       $modalInstance.dismiss('cancel');
     }
  });
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
判断文件是否正在被使用的JS代码
Dec 21 Javascript
jquery分析文本里url或邮件地址为真实链接的方法
Jun 20 Javascript
jquery仿QQ登录账号选择下拉框效果
Mar 22 Javascript
使用JSON作为函数的参数的优缺点
Oct 27 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
搭建vue开发环境
Jul 19 Javascript
vue如何根据网站路由判断页面主题色详解
Nov 02 Javascript
jquery绑定事件 bind和on的用法与区别分析
May 22 jQuery
vant时间控件使用方法详解
Dec 24 Javascript
angularJS模态框$modal实例代码
May 27 #Javascript
AngularJS入门教程二:在路由中传递参数的方法分析
May 27 #Javascript
AngularJS入门教程一:路由用法初探
May 27 #Javascript
Angular 4环境准备与Angular cli创建项目详解
May 27 #Javascript
BootStrap Table 后台数据绑定、特殊列处理、排序功能
May 27 #Javascript
Angularjs自定义指令Directive详解
May 27 #Javascript
react-redux中connect()方法详细解析
May 27 #Javascript
You might like
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
PHP 图片水印类代码
2012/08/27 PHP
php获取淘宝分类id示例
2014/01/16 PHP
PHP添加Xdebug扩展的方法
2014/02/12 PHP
PHP使用栈解决约瑟夫环问题算法示例
2017/08/27 PHP
用JavaScript 处理 URL 的两个函数代码
2007/08/13 Javascript
判断js对象是否拥有某一个属性的js代码
2013/08/16 Javascript
js 使FORM表单的所有元素不可编辑的示例代码
2013/10/17 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
js的form表单提交url传参数(包含+等特殊字符)的两种解决方法
2016/05/25 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
jQuery的each循环用法简单示例
2016/06/12 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
jQuery EasyUI Panel面板组件使用详解
2017/02/28 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
Python导入txt数据到mysql的方法
2015/04/08 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
Python正则表达式使用范例分享
2016/12/04 Python
利用python获取当前日期前后N天或N月日期的方法示例
2017/07/30 Python
Python实现将MySQL数据库表中的数据导出生成csv格式文件的方法
2018/01/11 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
Pytorch.nn.conv2d 过程验证方式(单,多通道卷积过程)
2020/01/03 Python
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
应届毕业生求职信范文分享
2013/12/26 职场文书
医学专业应届生的自我评价
2014/02/28 职场文书
C++程序员求职信范文
2014/04/14 职场文书
教研处工作方案
2014/05/26 职场文书
校园运动会广播稿
2014/10/06 职场文书
企业法人代表证明书
2015/06/18 职场文书
宝宝满月宴答谢词
2015/09/30 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
Python中递归以及递归遍历目录详解
2021/10/24 Python