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 相关文章推荐
(function($){...})(jQuery)的意思
Jul 22 Javascript
JavaScript中的object转换成number或string规则介绍
Dec 31 Javascript
EasyUI中datagrid在ie下reload失败解决方案
Mar 09 Javascript
js实现刷新iframe的方法汇总
Apr 27 Javascript
js控制多图左右滚动切换效果代码分享
Aug 26 Javascript
js判断数组key是否存在(不用循环)的简单实例
Aug 03 Javascript
jQuery联动日历的实例解析
Dec 02 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
js使用ajax传值给后台,后台返回字符串处理方法
Aug 08 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
JavaScript+HTML实现学生信息管理系统
Apr 20 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使用OB缓存实现静态化功能示例
2019/03/23 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
javascript 操作文件 实现方法小结
2009/07/02 Javascript
javascript下数值型比较难点说明
2010/06/07 Javascript
浅谈javascript 函数属性和方法
2015/01/21 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
JavaScript控制网页平滑滚动到指定元素位置的方法
2015/04/17 Javascript
JS基于Mootools实现的个性菜单效果代码
2015/10/21 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
ReactNative列表ListView的用法
2017/08/02 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
vue element table中自定义一些input的验证操作
2020/07/18 Javascript
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
Python对小数进行除法运算的正确方法示例
2014/08/25 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
树莓派用python中的OpenCV输出USB摄像头画面
2019/06/22 Python
浅谈Python协程
2020/06/17 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
Internal修饰符有什么含义
2013/07/10 面试题
商务专员岗位职责
2013/11/23 职场文书
大学生写自荐信的技巧
2014/01/08 职场文书
乡镇干部先进性教育活动个人整改措施
2014/09/16 职场文书
2014年妇产科工作总结
2014/12/08 职场文书
明星邀请函
2015/02/02 职场文书
小学三八妇女节活动总结
2015/02/06 职场文书
公司致全体员工的感谢信
2019/06/24 职场文书
python随机打印成绩排名表
2021/06/23 Python
MySQL系列之七 MySQL存储引擎
2021/07/02 MySQL
MySQL 用 limit 为什么会影响性能
2021/09/15 MySQL
golang为什么要统一错误处理
2022/04/03 Golang