<!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. 编译c语言程序扩展ruby

    环境: windows 10 64bit ruby 2.2.4p230 (2015-12-16 revision 53155) [i386-mingw32] gcc version 4.8.1 (GC ...

  2. java中可变长参数

    ** * Created by Lenovo on 2017/12/10. * java中可变长参数 */ public class reflect04 { //m1有一个int类型的可比变长参数 / ...

  3. [编织消息框架][JAVA核心技术]cglib动态代理

    先在mavne项目里添加cglib库 maven仓库搜索cglib版本 maven地址:http://mvnrepository.com/ 点击最新的版本 3.2.5 复制到pom.xml  depe ...

  4. Java实现简单工厂模式

    昨天看了一下设计模式,复习了一下简单工厂模式,做个笔记,浅淡一下我对简单工厂模式的理解.书上使用的是C#,因为我所学的是Java,所以本人就用Java实现了一遍.如果有讲的不对的地方,希望能够指出来. ...

  5. Lambda 表达式，Java中应用Lambda 表达式

    一.Lambda 表达式 简单来说,编程中提到的 lambda 表达式,通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用,也就是指匿名函数. 链接:知乎 先举一个普通的 Python 例 ...

  6. Head First设计模式之享元模式（蝇量模式）

    一.定义 享元模式(Flyweight Pattern)主要用于减少创建对象的数量,以减少内存占用和提高性能.这种类型的设计模式属于结构型模式,它提供了减少对象数量从而改善应用所需的对象结构的方式. ...

  7. HTMLTestRunner测试报告中文乱码问题解决

    在学习python selenium自动化测试学习中遇到HTMLTestRunner测试报告出现乱码的问题 Test Group/Test case Count Pass Fail Error Vie ...

  8. CSS预编译器less简单用法

    1.变量 定义变量 @变量名:值; @test_width:100px; 使用变量 .box{ width:@test_width; height:@test_width; background-co ...

  9. Java 控制台输入数字 输出乘法表（代码练习）

    最近,回忆了一些刚学习Java时经常练习的一些小练习题.感觉还是蛮有趣的,在回顾时想起好多学习时的经历和坎坷,一道小小的练习题要研究半天,珍重过往,直面未来.下面贡献代码,Java 控制台输入数字 输 ...

  10. mysql之其他

    一 IDE工具介绍 下载链接:https://pan.baidu.com/s/1bpo5mqj 掌握: 1. 测试+链接数据库 2. 新建库 3. 新建表,新增字段+类型+约束 4. 设计表:外键 5 ...