调用模态框:

$scope.open = function (size) { //这里很关键,是打开模态框的过程
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,//打开时的动画开关
templateUrl: 'myModalContent.html',//模态框的页面内容,这里的url是可以自己定义的,也就意味着什么都可以写
controller: 'ModalInstanceCtrl',//这是模态框的控制器,是用来控制模态框的
size: size,//模态框的大小尺寸
resolve: {//这是一个入参,这个很重要,它可以把主控制器中的参数传到模态框控制器中
items: function () {//items是一个回调函数
return $scope.items;//这个值会被模态框的控制器获取到 }
}
});
modalInstance.result.then(function (selectedItem) {//这是一个接收模态框返回值的函数 $scope.selected = selectedItem;//模态框的返回值
}, function () {
$log.info('Modal dismissed at: ' + new Date());
});

举个栗子

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl', function ($scope, $uibModalInstance, items) {
//这是模态框的控制器,记住$uibModalInstance这个是用来调用函数将模态框内的数据传到外层控制器中的,items则上面所说的入参函数,它可以获取到外层主控制器的参数
$scope.items = items;//这里就可以去外层主控制器的数据了
$scope.selected = {
item: $scope.items[0]
};
$scope.ok = function () {
//close函数是在模态框关闭后调用的函数,他会将这个参数传到主控制器的results函数中,作为回调值
$uibModalInstance.close($scope.selected.item);
};
$scope.cancel = function () {
//dismiss也是在模态框关闭的时候进行调用,而它返回的是一个reason
$uibModalInstance.dismiss('cancel');
};
});

Angular-ui/bootstarp modal 主控制器与模态框控制器传值的更多相关文章

  1. angularjs 给封装的模态框元素传值,和实现兄弟传值

    本例实现封装的元素所放的位置不同,而选择不同的传值,这里举例封装了bootstrap模态框,以后也方便大家去直接使用.方法举例如下:首先主页调用css/js有: <link rel=" ...

  2. bootstrap模态框通过传值解决重复提交问题

    自己通过模态框确认是否提交的功能时,总是重复提价上次的请求. 原因:重复的原因是jquery通过id绑定了确定按钮的onclick事件,所以每次提交都会增加 一次绑定(没有清除上次的绑定),才造成了重 ...

  3. angular $modal模态框

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Bootstrap 模态框(Modal)插件

    原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...

  5. Bootstrap <基础三十二>模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用  ...

  6. Bootstrap-Plugin:模态框(Modal)插件

    ylbtech-Bootstrap-Plugin:模态框(Modal)插件 1.返回顶部 1. Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是 ...

  7. Bootstrap学习5--bootstrap中的模态框(modal,弹出层)

    bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...

  8. bootstrap modal模态框的运用

    http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html 方法 下面是一些可与 modal() 一起使用的有用的方法. 方 ...

  9. Bootstrap历练实例:模态框(Modal)插件

    模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...

随机推荐

  1. Jmeter打开url时提示“请在微信客户端打开链接问题”

    前提: 1.HTTP信息头管理器已添加了“User-Agent” 2.工作台添加HTTP代理服务器(注意端口和客户端填写的代理端口要一致) 但是运行的时候总是提示“请在微信客户端打开链接” 查阅各种资 ...

  2. python全栈开发学习_day2_语言种类及变量

    一.编程语言的分类及python相对其他语言的优势 1)三大语言种类及细分 1.机器语言(低级语言):直接用计算能够理解的二进制进行编写,直接控制计算机硬件. 优点:执行效率高. 缺点:开发效率低,跨 ...

  3. HDU - 5306 剪枝的线段树

    题意:给定\(a[1...n]\),\(m\)次操作,0表示使\([L,R]\)中的值\(a[i]=min(a[i],x)\),其余的1是查最值2是查区间和 本题是吉利爷的2016论文题,1 2套路不 ...

  4. python 元类以及练习

    ''' # 知识储备exec() # 参数1:字符串形式的命令 # 参数2:全局作用域(字典形式),如果不指定默认就使用globals() # 参数3:局部作用域(字典形式),如果不指定默认就使用lo ...

  5. mysql语句插入前判断数据是否重复

    在mysql中插入数据有时需要判断数据插入是否重复 语句编写:insert into 表(相应字段) select 相应字段 from dual where not exists (select 相应 ...

  6. 如何制作高水平简历?&& 制作简历时需要注意的问题

    1. 投递简历时一定要署名.  无论是简历的名称还是投递到邮箱时的名称,都需要说明重要信息,即 姓名-职位-学校-专业 . 这样,hr在筛选.录入简历时可以很方便查找简历,这样也可以给hr.面试官一个 ...

  7. selenium+Python(Page Object 设计模式实例)

    以下实例演示了采用了page Object设计模式的方式登录qq空间: 1.创建基础类page:在初始方法__init__()定义驱动的(driver),基本url(base_url)和超时时间(ti ...

  8. 基础selenium+Python(定位、等待、打印)

    1.第一个脚本 # coding = utf-8 from selenium import webdriver browser = webdriver.Firefox() browser.get(&q ...

  9. (转载)Eclipse快捷键大全

    Ctrl+1 快速修复(最经典的快捷键,就不用多说了)Ctrl+D: 删除当前行 Ctrl+Alt+↓ 复制当前行到下一行(复制增加)Ctrl+Alt+↑ 复制当前行到上一行(复制增加)Alt+↓ 当 ...

  10. git学习笔记5

    查看保存的进度 git stash list 恢复进度 git stash pop 测试运行哪些文件会被删除 git clean -nd 强制删除 git clean -fd 保存当前的工作进度,会保 ...