<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<link rel="stylesheet" type="text/css" href="libs/bootstrap/dist/css/bootstrap.min.css"/>

		<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-animate.js"></script>

    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular-sanitize.js"></script>

    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>

	</head>

	<body ng-app='myapp' >

		<h1 ng-controller='mycontroller' ng-click='kitme("lg")'>点我</h1>

		 <script type="text/ng-template" id="test.html">      //angular的模态框是可以载入一个html页面的，这里通过ng-template来创建一个html模块，也可以创建一个html文件。

        <div class="modal-header">

            <h3 class="modal-title" id="modal-title">hello</h3>

        </div>

        <div class="modal-body" id="modal-body">

        	<h1>就翻身解放了就</h1>

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

    </script>

		<script type="text/javascript">

			angular.module('myapp',['ngAnimate', 'ngSanitize', 'ui.bootstrap']).controller('mycontroller',function ($scope,$uibModal){

				$scope.item='item465554645';

				$scope.kitme=function(size){

					var modalInstance=$uibModal.open({

						 animation:true,

      					 ariaLabelledBy: 'modal-title',

      					ariaDescribedBy: 'modal-body',

      					templateUrl: 'test.html',  //载入的html文件

      					controller: 'ModalInstanceCtrl',  //为载入的文件定义一个控制器

      					size: size,  // size ： lg sm 两值

      					resolve: {   //resolve是成功创建模态框时，将有效数据传给模态框的控制器，模态框的控制通过注入的形式获取，这里传送了一个item的值；

        					item: function () {

          						return $scope.item;

        					}

     					 }

					});

					modalInstance.result.then(function (selected) {  //配合模态框模块执行完毕，成功关闭后执行的回调函数。selected是模态框传过来的值。

      					alert(selected);

    					}, function () {

						alert('error');

    				}，function (){
　　　　　　　　　　　　　　　　　　　　　　　　//取消关闭后执行。
　　　　　　　　　　　　　　　　　　　　});

				};

			});

			angular.module('myapp').controller('ModalInstanceCtrl',function($uibModalInstance,$scope,item){  //此控制器只有在模态框成功打开时才会执行。

				 $scope.ok = function () {

    				$uibModalInstance.close('wang');  //close方法会将参数值回调返回。

  				};

  				$scope.cancel = function () {

    				$uibModalInstance.dismiss('cancel');  //关闭模态框，也会执行回调。

 				 };

			});

		</script>

	</body>

</html>

　　

angular $modal模态框的更多相关文章

  1. 轻量级Modal模态框插件cta.js

    今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <se ...

  2. 【bootstrap】modal模态框的几种打开方法+问题集锦

    第一部分: 关于bootstrap中modal的使用,下面把几种自己用的打开方法展示出来 首先呢,得有个Bootstrap的页面,这里就不说了. 其次呢,得有个modal放在页面中,不管你这段代码加在 ...

  3. 重置 Bootstrap modal 模态框数据

    利用 Bootstrap modal 模态框弹层添加或编辑数据,第二次弹出模态框时总是记住上一次的数据值,stackoverflow 上找到个比较好的方法,就是利用 jQuery 的 clone 方法 ...

  4. 修改bootstrap modal模态框的宽度

    原文链接:http://blog.csdn.net/wuhawang/article/details/52252912 修改模态框的宽度很简单,修改width属性就可以了 但是要注意的一点是,修改的不 ...

  5. 关于【bootstrap modal 模态框弹出瞬间消失的问题】

    前提是你没有重复引入bootstrap.js\bootstrap.min.js和modal.js.一下提供一个小例子. <button class="btnbtn-primary bt ...

  6. Bootstrap modal模态框关闭时，combobox input下拉框仍然保留在页面上

    问题描述: 当点击模态框的关闭按钮时,下拉框中的内容没有消失,而是移动到了页面左上角 分析:这个问题的定位在于是用的哪种模态框,bootstrap和easyui都可以实现模态框,但是两个方法实现的模态 ...

  7. bootstrap modal模态框的运用

    http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html 方法 下面是一些可与 modal() 一起使用的有用的方法. 方 ...

  8. bootstrap下modal模态框中webuploader控件按钮异常（无法点击）问题解决办法【转】

    http://bbs.csdn.net/topics/391917552 具体如下:   $(function () {         var _$modal = $('#MyModal');    ...

  9. modal模态框插件

    用法: <!--模态框--> <div class="modal fade" id="myModal"> <div class=& ...

  10. amazeUI modal 模态框 关闭属性

    $('#my-prompt').modal({ relatedTarget: this, closeViaDimmer: false, // 点击外部空白处不关闭弹窗 closeOnConfirm:f ...

随机推荐

  1. python链接mysql

    1.安装MySQLdb MySQLdb 是用于Python链接Mysql数据库的接口,它实现了 Python 数据库 API 规范 V2.0,基于 MySQL C API 上建立的. 下载地址: ht ...

  2. iView的使用【CDN向】

    直接粗暴地上html代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. Find all factorial numbers less than or equal to N

    A number N is called a factorial number if it is the factorial of a positive integer. For example, t ...

  4. bzoj 3192: [JLOI2013]删除物品

    Description   箱子再分配问题需要解决如下问题:  (1)一共有N个物品,堆成M堆.  (2)所有物品都是一样的,但是它们有不同的优先级.  (3)你只能够移动某堆中位于顶端的物品.  ( ...

  5. SQL Server中varchar和nvarchar的区别

    varchar(n) 长度为 n 个字节的可变长度且非 Unicode 的字符数据.n 必须是一个介于 1 和 8,000 之间的数值.存储大小为输入数据的字节的实际长度,而不是 n 个字节.nvar ...

  6. w 命令详解

    作用: 用于显示已经登录系统的用户列表, 并显示用户正在执行的指令. 执行这个命令可得知目前登入系统的用户有哪些人, 以及他们正在执行的程序.  单独执行w 命令会显示所有的用户, 您也可指定用户名称 ...

  7. java调优（一）

  8. mysql zip 版安装

    http://jingyan.baidu.com/article/8cdccae946133f315513cd6a.html

  9. mac 安装mysql特种报错的对应解决方式

    参考 :http://www.jianshu.com/p/776e72742c6e 原文废话太多了, 还是看我的好了. 配置环境变量 echo "export PATH=$PATH:/usr ...

  10. SpringMvc开发步骤

    1.导入基本jar包 2.在Web.xml中配置DispatcherServlet <!-- 配置 DispatcherServlet --> <servlet> <se ...