Angularjs中的ui-bootstrap的使用教程

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的使用教程，希望对大家有所帮助！

赞 (0)

相关推荐

  • Angularjs中的ui-bootstrap的使用教程

    Angularjs中的ui-bootstrap的使用教程

    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.定义一个 UiC

  • 探讨AngularJs中ui.route的简单应用

    html页面代码 <body ng-app="myApp"> <div ui-view></div> <div ui-view="login"></div> <div ui-view="enroll"></div> </body> 需要引用的ui.router.js文件 <script src="angular-ui-router.js

  • bootstrap tooltips在 angularJS中的使用方法

    使用bootstrap自带的提示控件,省去了不少事情 <div class="s2" ng-init="InitTooltip()"> <input type="text" ng-pattern="/^(http|https|ftp)\://[a-zA-Z0-9\.\,\?\'\\/\+&%\$\#\=~:_\-\s@]+$/" class="inputwords" id=&quo

  • 使用AngularJS中的SCE来防止XSS攻击的方法

    使用AngularJS中的SCE来防止XSS攻击的方法

    这篇文章展示了有关XSS(跨站脚本)的不同方案以及怎样使用AngularJS中SCE($sceProvider),sanitize service这些特性来正确处理XSS.如果我遗漏了什么重要的地方请直接评论/建议.同时,错别字请见谅. 以下几点内容将是我接下来要讲述的重点: 全部转码HTML 安全插入HTML的同时忽略类似"script"这样的标签.如果不加以注意,这将一样存在风险同时也会丑化页面,尤其是在有"img"标签的时候. 依赖并插入纯HTML:这也有风险

  • AngularJS中的DOM操作用法分析

    本文实例讲述了AngularJS中的DOM操作用法.分享给大家供大家参考,具体如下: 在angular中使用第三方插件时最好都封装到指令(directives)中去,DOM操作也最好都解构到指令中. 避免使用 jQuery 来操作 DOM,包括增加元素节点,移除元素节点,获取元素内容,隐藏或显示元素.你应该使用 directives 来实现这些动作,有必要的话你还要编写自己的 directives. 如果你感到很难改变习惯,那么考虑从你的网页中移除 jQuery 吧.真的,AngularJS 中

  • Angularjs中使用layDate日期控件示例

    layDate 控件地址:http://laydate.layui.com/ 前情:原来系统中使用的日期控件是UI bootstrap(地址:https://angular-ui.github.io/bootstrap/)里的.后来因为各种原因,要换掉UI bootstrap中的日期控件,改用layDate日期控件. 解决思路:将layDate的初始化及相关代码定义在指令里. 问题关键点:layDate操作的是Html元素的,怎么实现双向绑定,同步Angularjs模板值和Html的元素值. 指

  • AngularJS 中的指令实践开发指南(一)

    指令(Directives)是所有AngularJS应用最重要的部分.尽管AngularJS已经提供了非常丰富的指令,但还是经常需要创建应用特定的指令.这篇教程会为你讲述如何自定义指令,以及介绍如何在实际项目中使用.在这篇文章的最后(第二部分),我会指导你如何使用Angular指令来创建一个简单的记事本应用. 概述 一个指令用来引入新的HTML语法.指令是DOM元素上的标记,使元素拥有特定的行为.举例来说,静态的HTML不知道如何来创建和展现一个日期选择器控件.让HTML能识别这个语法,我们需要

  • 浅析angularJS中的ui-router和ng-grid模块

    浅析angularJS中的ui-router和ng-grid模块

    在家里闲着无聊,正好在网上找到了一个关于angular的教程,学习了一下angular的ui-router和ng-grid这两个模块,顺便模仿着做了一个小小的东西. 代码已经上传到github上,地址在这里哟https://github.com/wwervin72/Angular. 有兴趣的小伙伴可以看看.那么然后这里我们就先来了解一下这两个模块的用法. 我们先来说说ui-router这个模块,这个模块主要是用来实现深层次的路由的.其实angular有个内置的指令ng-route,如果在项目中没

  • AngularJS中$apply方法和$watch方法用法总结

    本文实例总结了AngularJS中$apply方法和$watch方法用法.分享给大家供大家参考,具体如下: 引言 最近在项目中封装控件的时候用到了$watch方法来监听module中的值的变化,当时小编对这个方法不是很了解,所以在网上找了一些资料来学习一下,下面小编就给大家简单介绍一些AngularJS中Scope 提供$apply 方法传播Model 的变化和$watch方法监听module变化. $apply使用情景 AngularJS 外部的控制器(DOM 事件.外部的回调函数如 jQue

  • AngularJS中的promise用法分析

    本文实例讲述了AngularJS中的promise用法.分享给大家供大家参考,具体如下: JavaScript异步回调有好处也有坏处,回调函数大量嵌套十分复杂．所以javascript中还有另一种异步处理模式叫promises．在AngularJS中的实现就是$q服务． 下面是一些小例子． then,catch,finally 在链最后的 catch 为整个链式处理提供一个异常处理点 在链最后的 finally 总是会被执行,不管 promise 被处理或者被拒绝,起清理作用 <!DOCTYPE

随机推荐