Angular-ui/bootstarp modal 主控制器与模态框控制器传值
调用模态框:
$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 主控制器与模态框控制器传值的更多相关文章
- angularjs 给封装的模态框元素传值,和实现兄弟传值
本例实现封装的元素所放的位置不同,而选择不同的传值,这里举例封装了bootstrap模态框,以后也方便大家去直接使用.方法举例如下:首先主页调用css/js有: <link rel=" ...
- bootstrap模态框通过传值解决重复提交问题
自己通过模态框确认是否提交的功能时,总是重复提价上次的请求. 原因:重复的原因是jquery通过id绑定了确定按钮的onclick事件,所以每次提交都会增加 一次绑定(没有清除上次的绑定),才造成了重 ...
- angular $modal模态框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Bootstrap 模态框(Modal)插件
原文链接:http://www.runoob.com/bootstrap/bootstrap-modal-plugin.html Bootstrap 模态框(Modal)插件 模态框(Modal)是覆 ...
- Bootstrap <基础三十二>模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. 如果您想要单独引用该插件的功能,那么您需要引用 ...
- Bootstrap-Plugin:模态框(Modal)插件
ylbtech-Bootstrap-Plugin:模态框(Modal)插件 1.返回顶部 1. Bootstrap 模态框(Modal)插件 模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是 ...
- Bootstrap学习5--bootstrap中的模态框(modal,弹出层)
bootstrap中的模态框(modal),不同于Tooltips,模态框以弹出对话框的形式出现,具有最小和最实用的功能集. 务必将模态框的 HTML 代码放在文档的最高层级内(也就是说,尽量作为 b ...
- bootstrap modal模态框的运用
http://www.ziqiangxuetang.com/bootstrap/bootstrap-modal-plugin.html 方法 下面是一些可与 modal() 一起使用的有用的方法. 方 ...
- Bootstrap历练实例:模态框(Modal)插件
模态框(Modal)是覆盖在父窗体上的子窗体.通常,其目的是显示来自一个单独源的内容,可以在不离开父窗体的情况下进行一些交互,子窗体提供一些交互或信息. <!DOCTYPE html>&l ...
随机推荐
- 四大算法解决最短路径问题(Dijkstra+Bellman-ford+SPFA+Floyd)
什么是最短路径问题? 简单来讲,就是用于计算一个节点到其他所有节点的最短路径. 单源最短路算法:已知起点,求到达其他点的最短路径. 常用算法:Dijkstra算法.Bellman-ford算法.SPF ...
- 使用 WebClient 來存取 GET,POST,PUT,DELETE,PATCH 網路資源
WebClient 基本資訊 提供通用方法使用 WebRequest 類別傳送及接收 URI (支援 http:, https:, ftp:,和 file: ) 的資源 Namespace:Syste ...
- px,em, rem的区别,在项目中怎么使用rem.
一.px px像素,绝对单位.像素px是相对于显示器屏幕分辨率而言的,是一个虚拟的长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度单位,需要指定精度DPI. 二.em em是相对长 ...
- python高级(六)——用一等函数实现设计模式
本文主要内容 经典的“策略”模式 python高级——目录 文中代码均放在github上:https://github.com/ampeeg/cnblogs/tree/master/python高级 ...
- [Alpha]Scrum Meeting#3
github 本次会议项目由PM召开,时间为4月3日晚上10点30分 时长15分钟 任务表格 人员 昨日工作 下一步工作 木鬼 撰写团队贡献分配计划(issue#39) 调整&分配工作 SiM ...
- mybatis的CRUD实例(四)
接下来我们来实现新增用户功能: 一.新增用户 这里我们使用的sql为:insert into user(username,birthday,sex,address) values ("lwj ...
- &与&& ,|与||的区别
&&和||是短路运算符,&和|是非短路运算符 &&与& 区别:两者都表示“与”运算,但是&&运算符第一个表达式不成立的话,后面的表达式不 ...
- 51nod 1812 树的双直径 题解【树形DP】【贪心】
老了-稍微麻烦一点的树形DP都想不到了. 题目描述 给定一棵树,边权是整数 \(c_i\) ,找出两条不相交的链(没有公共点),使得链长的乘积最大(链长定义为这条链上所有边的权值之和,如果这条链只有 ...
- 2019.4.18 HTML + CSS相关整理
目录 标签 块标签 行标签 行块转化 嵌套规则 css引入方式 行间样式 内部引入 外部引入 选择器 基础选择器 组合选择器 盒模型 css样式 字体属性 设置字体的大小 设置字体的粗细 设置字体的风 ...
- jieba和文本词频统计
---恢复内容开始--- 一.结巴中文分词涉及到的算法包括: (1) 基于Trie树结构实现高效的词图扫描,生成句子中汉字所有可能成词情况所构成的有向无环图(DAG): (2) 采用了动态规划查找最大 ...