Angularjs总结(三)摸态框的使用

静态页面:

<input class="btn btnStyle " value="提&emsp;取" type="button" ng-click="TQZJDFG() " />

controllers中的方法:

 1 $scope.TQZJDFG = function () {
 2     //可以将此参数传递到所弹出的摸态框的控制器中
 3     var data = {
 4         ‘name‘: 1,
 5         ‘age‘: 20
 6     }
 7     var modalInstance = $modal.open({
 8         templateUrl: ‘partials/WindowView/_getInfo.html‘,
 9         controller: ‘getInfo-controller‘,
10         backdrop: "true",
11         size: 900,
12         resolve: {
13             items: function () {
14                 return data;
15             }
16         }
17     });
18
19     modalInstance.result.then(function (data) {
20
21         //data为摸态框点击关闭时,传递回来的参数
22     }
23     )
24 }

模态框所需控制器,其中items即为TQZJDFG()方法中传递过来的data:

1 app.controller(‘getInfo-controller‘,[‘items‘,‘$modalInstance‘,function(items,$modalInstance){
2         //摸态框关闭
3         $modalInstance.dismiss(‘cancel‘);
4         //摸态框关闭传递相应参数回调用页面
5         $modalInstance.close(data);
6     }])

创建可拖动指令见:http://www.cnblogs.com/bobo-show/p/5106204.html

 

时间: 2024-08-26 11:01:43

Angularjs总结(三)摸态框的使用的相关文章

alert,摸态框的重新编写

以前写的摸态框,现在用来覆盖 alert ; 兼容的问题还未测试,后续会进行修改 -(function(window){ var Modal = function(){},modal var version = 1.0; Modal.prototype = { init:function(str){ this.createEntity(str); }, createEntity:function(str){ var bg = document.createElement('div'); bg.i

bootstrap中如何多次使用一个摸态框

/**弹出框设置**/ function showjcziimodal(url, width) { $("#jczii-modal").remove();//如果存在此Id的Modal先remove var modal = $('<div id="jczii-modal" class="modal fade .jczii-modal" tabindex="-1" role="dialog"> &

bootstrap去除默认的点击留白处摸态框消失

两种形式: 一.JS调用时: $('#myModal').modal({backdrop: 'static', keyboard: false}); 二.直接写在modal的结构上: <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"data-backdrop=&

使用AngularJS的三个重要原因

入门教程:http://www.ituring.com.cn/minibook/303 : http://angularjs.cn/tag/AngularJS 原因一:Google开发的框架 要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的,比如,Cappucino 还有 Knockout.而anguar.js是由互联网巨人Google组织开发的.这意味这你有更加强大的社区支持.谁都不希望第一天开始使用一个框架,第二天发现这个框架已经被遗弃了吧! 其实这不是Google第一次尝

JS三种消息框的使用

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>window对象的三种提示框</title> <script type="text/javascript"> //确认框使用方法 function ww() { var re = confirm("确认退出?"); if(re == true)

AngularJS进阶(三十九)基于项目实例解析ng启动加载过程

基于项目实例解析ng启动加载过程 前言 在AngularJS项目开发过程中,自己将遇到的问题进行了整理.回过头来总结一下angular的启动过程. 下面以实际项目为例进行简要讲解. 1.载入ng库 2.等待,直到DOM树构造完毕. 3.发现ng-app,自动进入启动引导阶段. 4.根据ng-app名称找到相应的路由. 5.加载默认地址. 6.Js顺序执行,加载相应模版页 sys_tpls/home.html 7.在此,可以看到index路由中只是填充了ui-view为sys_login的div模

提升用户体验,你不得不知道的事儿——三种提醒框的微技巧

大家都知道无论是android开发还是其他的开发,用户的体验都是很重要的事儿,下面就android开发中的三种提醒方式,Toast,SnackBar,Dialog做一些细节上的处理,或许能让你的产品更有用户亲和力. 1)Toast Toast是一个轻量级的提醒框,相信各位小伙伴,肯定在平时开发中用到地方堪称最多,使用方式非常简单,简单的一句代码搞定. 1 Toast.makeText(this,"This is a toast...",Toast.LENGTH_SHORT).show(

html年月日下拉联动菜单 年月日三下拉框联动

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head><title>年月日三下拉框联动</title>

js默认三种弹框方式

<!--js默认三种弹框方式--> <!--警告--><div onclick="alert('警告')">onclick!</div> <!--确认--><div onclick="confirm('确认')">onclick!</div> <!--信息输入--><div onclick="prompt('信息输入')">onclick!