<!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. KVM（二）：KVM应用

    ++++++++++++++++++++++++++++++创建和拍摄快照++++++++++++++++++++++++++++++++++ KVM快照方法常用的是qemu-img snapshot ...

  2. sort 命令详解

    sort  作用:将文本文件内容加以排序,sort可针对文本文件的内容,以行为单位来排序  参数: -b 忽略每行前面开始出的空格字符. -c 检查文件是否已经按照顺序排序. -d 排序时,处理英文字 ...

  3. Web API系列之一 Rest简介

    1.REST:Representational State Transfer表征状态转移,是Roy Fielding博士在2000年他的博士论文中提出来的一种软件架构风格.REST设计风格有如下几点: ...

  4. vim 高级应用

    1 全文内容删除 方法1:    按ggdG方法2:       :%d

  5. Linux下Jdk的安装和jdk环境变量的设置

    我们在Linux下安装系统软件的时候,经常遇到一些系统环境变量配置的问题.什么是环境变量?如何定制环境变量?我将在下面做一些介绍.一.什么是环境变量?Linux是一个多用户的操作系统.多用户意味着每个 ...

  6. dubbo源码—dubbo简介

    dubbo是一个RPC框架,应用方像使用本地service一样使用dubbo service.dubbo体系架构 上图中的角色: 最重要的是consumer.registry和provider con ...

  7. SQL SERVER 常用知识整理

    以前写了一些关于sql的文章,包括一些转载的,这里做下整理,方便需要时候使用 一.基础运用 SQL 数据结构操作语句 SQL 时间处理 SQL 常见函数使用 CASE WHEN THEN 小结 二.优 ...

  8. robotframework的学习笔记（十六）----robotframework标准库String

    官方文档:http://robotframework.org/robotframework/latest/libraries/String.html Introduction A test libra ...

  9. 分布式文件系统FastDFS详解

    上一篇文章<一次FastDFS并发问题的排查经历>介绍了一次生产排查并发问题的经历,可能有些人对FastDFS不是特别的了解,因此计划写几篇文章完整的介绍一下这个软件. 为什么要使用分布式 ...

  10. 微信小程序跳一跳辅助程序（手动版）

    最近,微信官方推出了demo小程序游戏<跳一跳>,这个游戏操作简单,容易上手,却又不容易获得高分,受到很多人的喜爱(emm...这游戏有毒).自己也尝试了玩了几次,作为一个手残+脑残的资深 ...