<!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. Servlet与Jsp的结合使用实现信息管理系统一

    PS:1:先介绍一下什么是Servlet? Servlet(Server Applet)是Java Servlet的简称,称为小服务程序或服务连接器,用Java编写的服务器端程序,主要功能在于交互式地 ...

  2. 关于文件上传的ajax交互

    首先我们来了解一下上传文件 <input type="file"> input的file常用上传类型 后缀名 MIME名称 *.3gpp audio/3gpp, vid ...

  3. tcpdump 命令详解

    TCPdump: dump  traffic on a network ,根据使用者的定义对网络上的数据包进行截获的一种包分析工具. TCPdump 可以讲网络中传送的数据包的 头信息完全截获下来提供 ...

  4. Oracle 启动参数

    查看数据库的SID DB_NAME SERVICE_NAME

  5. 基于Java Mail 进行发送（带附件和压缩附件）的邮件

    刚进公司的training, 下面是要求: Self-study of Java Mail library:  http://www.oracle.com/technetwork/java/javam ...

  6. 利用伪元素:after清除浮动

    一.代码 html代码 <div class="clearfix"></div> css样式 .clearfix{ zoom:1;/*这个属性是为了兼容IE ...

  7. PHP 判断Header 送出前, 是否有值被送出去: headers_sent()

    1 为避免header()函数是,出现 <b>Warning</b>:  Cannot modify header information - headers already ...

  8. java多线程(七)－线程之间的 协作

    对于多线程之间的共享受限资源,我们是通过锁(互斥)的方式来进行保护的,从而避免发生受限资源被多个线程同时访问的问题.那么线程之间既然有互斥,那么也会有协作.线程之间的协作也是必不可少的,比如 盖个商场 ...

  9. Git-分布式版本控制系统（一）

    Git可以在Linux.Unix.Mac和Windows Git 的安装 mac [xcode, 菜单"Xcode"->"Preferences",在弹出 ...

  10. XCode8中的sizeClass设置

    xcode8出来很久了,xcode9都要出来了,项目中由于一直没遇到用到适配屏幕的情况,所以一直也就忽略了这个知识点.今天忽然想起来,就抱着试一试的态度打开了xcode,我去~就我现在了解而言,屏幕大 ...