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对象的property和prototype是这样一种关系
Mar 24 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
Jquery网页出现的乱码问题的三种解决方法
Jun 30 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
Jul 12 Javascript
vue 使用eventBus实现同级组件的通讯
Mar 02 Javascript
使用Node.js在深度学习中做图片预处理的方法
Sep 18 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
Apr 14 Javascript
typescript编写微信小程序创建项目的方法
Jan 29 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取整的几种方式
2013/06/25 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
Jquery操作Select 简单方便 一个js插件搞定
2009/11/12 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
jQuery中事件与动画的总结分享
2016/05/24 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
详解基于Bootstrap+angular的一个豆瓣电影app
2017/06/26 Javascript
vue中Axios的封装与API接口的管理详解
2018/08/09 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
每周一练 之 数据结构与算法(Stack)
2019/04/16 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
react ant Design手动设置表单的值操作
2020/10/31 Javascript
[06:36]吞吞映像top1
2014/06/20 DOTA
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
Python中在for循环中嵌套使用if和else语句的技巧
2016/06/20 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
Python3内置模块之base64编解码方法详解
2019/07/13 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
CSS3解析抖音LOGO制作的方法步骤
2019/04/11 HTML / CSS
HTML5的新特性(1)
2016/03/03 HTML / CSS
法院授权委托书格式
2014/09/28 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
建筑工程催款函
2015/06/24 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
Nginx源码编译安装过程记录
2021/11/17 Servers
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
2022/04/24 Vue.js