angularjs之ui-bootstrap的使用
2015-12-03 11:11
706 查看
1.新建uiBootstrap.html页面,引入依赖的js和css类库
2.新建uiBootstrap.js文件,定义一个uiModule
3.定义dialog弹出窗口的模板
4.定义一个
,并声明一个用于打开dialog弹出框的函数openDialog
5.定义dialog弹出框的
这个controller中声明弹出框中确认和取消按钮的单击事件的处理函数
5.在uiBootstrap.html文件中添加一个按钮,用于打开窗口
6.效果
补充:
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-router的使用
- angularjs指令的使用
- 我的第一篇博客随笔:关于angularjs API的理解心得。angular.bind() angular.boostrap()
- AngularJS进阶(十五)Cookie 'data' possibly not set or overflowed because it was too large
- AngularJS进阶(十五)Cookie 'data' possibly not set or overflowed because it was too large
- 前端使用AngularJS的$resource,后端ASP.NET Web API,实现增删改查
- AngularJS进阶(十四)AngularJS灵异代码事件
- AngularJS进阶(十四)AngularJS灵异代码事件
- 了解angular2--template(译)
- AngularJS Promise
- AngularJS过滤器
- angular模块控制器分离二
- angular模块控制器分离入门一
- AngularJS Best Practices: SEO
- AngularJS Best Practices: ui-router
- AngularJS Best Practices: ASP.NET MVC Directory Structure
- AngularJS Best Practices: pretty urls
- Angular 学习笔记——自定义指令
- angularjs的filter过滤和orderBy排序
- 了解angular2---表单