Angularjs中的ui-bootstrap的使用教程

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

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

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

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

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

rush:js;"> 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中声明弹出框中确认和取消按钮的单击事件的处理函数

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

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

rush:js;">

6.效果

补充:

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

相关文章

Bootstrip HTML 查询搜索常用格式模版 <form class=&...
如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
是的,可以将status设置为布尔类型,这样可以在前端使用复选...
前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
起步导入:<linkrel="stylesheet"href="b...