Angularjs中的ui-bootstrap的使用教程


Posted in Javascript onFebruary 19, 2017

1.新建uiBootstrap.html页面,引入依赖的js和css类库

2.新建uiBootstrap.js文件,定义一个uiModule 模块,引入依赖的模块

/**
 * Created by zhong on 2015/9/7.
 */
var uiModule = angular.module("uiModule",["ui.bootstrap","ui.router"]);
});

3.定义dialog弹出窗口的模板

4.定义一个 UiController,并声明一个用于打开dialog弹出框的函数openDialog

uiModule.controller("UiController",function($scope,$modal){
//打开dialog的函数
$scope.openDialog = function(){
$modal.open({
  templateUrl:"myModalContent.html",//dialog的id,与html建立的template的id一致
controller:"ModalController"//指定dialog的controller
});
 };
})

5.定义dialog弹出框的 ModalController

这个controller中声明弹出框中确认和取消按钮的单击事件的处理函数

controller("ModalController",function($scope, $modalInstance){
//定义dialog中的确认按钮的点击事件的处理函数
$scope.ok = function(){
$modalInstance.close();//
};
//定义dialog中的取消按钮的点击事件的处理函数
$scope.cancel = function(){
$modalInstance.dismiss('cancel');
 }
});

5.在uiBootstrap.html文件中添加一个按钮,用于打开窗口

<div ng-controller="UiController">
 <button ng-click="openDialog()" class="btn btn-default">打开弹出窗口</button>
</div>

6.效果

Angularjs中的ui-bootstrap的使用教程

补充:

Angularjs中的ui-bootstrap的使用教程

以上所述是小编给大家介绍的Angularjs中的ui-bootstrap的使用教程,希望对大家有所帮助!

Javascript 相关文章推荐
对textarea框的代码调试,而且功能上使用非常方便,酷
Jun 30 Javascript
取得父标签
Nov 14 Javascript
jQuery select操作控制方法小结
May 26 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
JavaScript实现点击自动选择TextArea文本的方法
Jul 02 Javascript
ExtJs动态生成treepanel的Json格式
Jul 19 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
微信小程序整个页面的自动适应布局的实现
Jul 12 Javascript
vue循环中点击选中再点击取消(单选)的实现
Sep 10 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
Feb 19 #Javascript
RequireJs的使用详解
Feb 19 #Javascript
Vue.js -- 过滤器使用总结
Feb 18 #Javascript
JS打开摄像头并截图上传示例
Feb 18 #Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 #Javascript
AngularJS表单提交实例详解
Feb 18 #Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 #Javascript
You might like
php获取Google机器人访问足迹的方法
2015/04/15 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
JavaScript 联动的无限级封装类,数据采用非Ajax方式,随意添加联动
2010/06/29 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
JS实现拖动示例代码
2013/11/01 Javascript
js保留小数点后几位的写法
2014/01/03 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
2014/08/16 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
常见的javascript跨域通信方法
2015/12/31 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
2016/03/18 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
2016/06/08 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
关于vue.js v-bind 的一些理解和思考
2017/06/06 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
浅谈JavaScript_DOM学习篇_图片切换小案例
2019/03/19 Javascript
layui 弹出删除确认界面的实例
2019/09/06 Javascript
JS函数本身的作用域实例分析
2020/03/16 Javascript
[01:10:58]KG vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python微信跳一跳系列之棋子定位像素遍历
2018/02/26 Python
Python批量合并有合并单元格的Excel文件详解
2018/04/05 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
PyQt5实现简易计算器
2020/05/30 Python
python flask安装和命令详解
2019/04/02 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
利用CSS3 动画 绘画 圆形动态时钟
2018/03/20 HTML / CSS
Staples美国官方网站:办公用品一站式采购
2016/07/28 全球购物
分解成质因数(如435234=251*17*17*3*2,据说是华为笔试题)
2014/07/16 面试题
主要的Ajax框架都有什么
2013/11/14 面试题
岗位职责的含义
2013/11/17 职场文书
英文导游欢迎词
2014/01/11 职场文书
酒店开业策划方案
2014/06/02 职场文书
校本培训个人总结
2015/02/28 职场文书