源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Angularjs中的ui-bootstrap的使用教程

  • 时间:2021-11-20 19:16 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要: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.效果 [img]http://files.jb51.net/file_images/article/201702/2017219104712166.png?2017119105031[/img] 补充: [img]http://files.jb51.net/file_images/article/201702/2017219105052311.png?2017119105119[/img] 以上所述是小编给大家介绍的Angularjs中的ui-bootstrap的使用教程,希望对大家有所帮助!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部