<!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. ArcGIS 网络分析[8.5] 资料5 网络分析拓展模块及各种接口说明

    说完了网络数据集如何用AO来创建,接下来就说说如何用另一个类库--NetworkAnalyst来做网络分析. 区别于NetworkAnalysis,这个是几何网络分析用的类库. 本篇先做类库和有关接口 ...

  2. PHP-无限级分类(迭代法创建)

    $area = array( array('id'=>1,'name'=>'安徽','parent'=>0), array('id'=>2,'name'=>'海淀','p ...

  3. 《重新定义公司 - Google 是如何运营的》重点摘录

      赋能:创意时代的组织原则 未来企业的成功之道,是聚集一批聪明的创意精英,营造合适的氛围和支持环境,充分发挥他们的创造力,快速感知用户需求,愉快地创造响应的产品和服务.未来组织的最重要功能,那就是赋 ...

  4. css3毛玻璃模糊效果

    CSS3 blur滤镜实现如下测试代码: .blur { -webkit-filter: blur(10px); /* Chrome, Opera */ -moz-filter: blur(10px) ...

  5. SQL基础学习_04_视图

    视图 1. 视图的创建     视图就是保存好的SELECT语句,这些SELECT语句执行之后会产生新的表,所以在SQL中,视图和表是不做差别对待的,也就是SQL也可以对视图做一些操作:     由于 ...

  6. Extjs入门-grid

    function rowdblclickFn(grid, rowIndex, e){//双击事件              var row = grid.store.getById(grid.stor ...

  7. Python 实现网页截屏、查库、发邮件

    本文介绍了使用 Python(2.7版本)实现网页截屏.查库.发邮件的 demo.用到了 selenium.phantomjs.mailer.jinja2.mysqldb 还有 image,都是比较典 ...

  8. 10个优秀个android项目，精选|快速开发

    1.Android-FilePicker-android图片和文档选择器 项目地址 https://github.com/DroidNinja/Android-FilePicker 2.ViewPag ...

  9. unity3d 打包个人记录

    证书问题Android:CreateCer.bat ztmyseabed 路径:tool/Build/Windows/Android下iOS:MacCer文件夹如何上传ipa:修改版本号version ...

  10. 常用的linux系统监控命令

    记录一下自己常用的linux系统命令,方便以后查阅,发觉记忆越来越不行了 找到最耗CPU的java线程 ps命令 命令:ps -mp pid -o THREAD,tid,time   或者  ps - ...