当前位置： 移动技术网 > IT编程>脚本编程>AngularJs > Angularjs中的ui-bootstrap的使用教程

Angularjs中的ui-bootstrap的使用教程

2018年05月01日  | 移动技术网IT编程  | 我要评论

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

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网