频道导航

详解Angular-ui-BootStrap组件的解释以及使用

2019-01-08 Bootstrap 前端之家

前端之家收集整理的这篇文章主要介绍了详解Angular-ui-BootStrap组件的解释以及使用，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

关于UI BootStrap

UI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件。

1. 关于ng-router（angular-router.js）和ui-router(angular-ui-router.js)的区别

ngroute是用AngularJS框架的路由的核心部分。
ui-router是一个社区库，它是用来提高完善ngroute路由功能的。

实例：

使用ng-router：

首先引入js文件

tooltip可以使用的属性有：

属性名默认值备注 tooltip-animation true 是否在显示和隐藏时使用动画 tooltip-append-to-body false 是否将提示框放在body的末尾 tooltip-class 加在tooltip上的自定义的类名 tooltip-enable true 是否启用 tooltip-is-open false 是否显示提示框 tooltip-placement top 提示框的位置。可设置的值包括：top,top-left,top-right,bottom,bottom-left,bottom-right,left,left-top,left-bottom,right,right-top,right-bottom tooltip-popup-close-delay 0 关闭提示框前的延迟时间 tooltip-popup-delay 0 显示提示框前的延迟时间 tooltip-trigger mouseenter 显示提示框的触发事件

2. 使用popover

<div class="form-group">
<button uib-popover="this is popover box" popover-placement="auto" popover-trigger="'mouseenter'">文本提示框

<div class="form-group">

popover的属性有：

popover-animation true 是否在显示和隐藏时使用动画 popover-append-to-body false 是否将提示框放在body的末尾 popover-enable true 是否启用 popover-is-open false 是否显示提示框 popover-placement top 提示框的位置。可设置的值包括：top,right-bottom popover-popup-close-delay 0 关闭提示框前的延迟时间 popover-popup-delay 0 显示提示框前的延迟时间 popover-trigger mouseenter 显示提示框的触发事件 popover-title 标题

大部分属性和tooltip也是一样的，只是没有popover-class，另外多了个popover-title。

需要注意的一点是，popover的全局配置和tooltip一样，是使用$uibTooltipProvider来配置的。

全局配置tooltip和popover参照网址

2. 使用uib-datepicker并且封装成指令

这个插件是datepicker只能获取日期！不是datetimepicker！还有一个叫timepicker，真纳闷为什么angular团队不把这两个插件组成一个。。。

因为项目用到的第三方库实在太多，不愿意再去别的地方再弄一个时间控件，所以就用了angular自带的这个，说实话，很一般。。。

上代码吧：

指令声明：

return {

restrict: 'AE',replace: false,templateUrl: 'directives/single-datepicker/single-datepicker.html',scope: {

dateValue: '=ngModel' //逆向绑定输入框的值到父作用域的ng-model

},controller: function($scope,$filter) {

$scope.dateOptions = {

maxDate: new Date(2099,12,30)

};

$scope.altInputFormats = ['yyyy-M!-d!'];

$scope.open = function() {

$scope.opened = true;

};

$scope.transformDate = function() {

$scope.dateValue = $filter('date')($scope.date,'yyyy-MM-dd HH:mm:ss');

};

}

}

});

指令模板：uib-datepicker就在这

<span class="input-group input-group-xs" style="width:80%;margin:0 auto;">

<input type="text" class="form-control" uib-datepicker-popup="{{'yyyy-MM-dd'}}" ng-model="date" is-open="opened"

clear-text="清空" current-text="今天" ng-required="true" close-text="关闭" ng-change="transformDate()"/>

<span class="input-group-btn">

<button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar">

调用：（别忘了引入指令的js文件）

3. uib-tab标签页

直接在要使用的div或者容器内使用

4. uib-modal 模态框

前台调用：

打开模态框的函数

// 弹出确认窗口

var modalInstance = $uibModal.open({

templateUrl: 'vehicle-detail.html',controller: 'VehicleDetailCtrl',animation: true,resolve: {

vehicle: vehicle,allTypes: function() {

return $scope.allTypes;

}

},size: 'lg'

});

// 更新页面内容

modalInstance.result.then(function(response) {

refreshByCloseStatus(response,$scope.vehicles);

});

}

模态框对应的controller

$scope.confirm = function() {

judgeDelete(flag,instance);

$uibModalInstance.close("close");

}

$scope.cancel = function() {

$uibModalInstance.dismiss("cancel");

}
}]);

模态框对应的html模板

<div class="modal-body">
<form name="VehicleInfo">
<div class="form-group">

<td><label for="vehicleType">保险车辆 <span class="text-danger">*

</td>

<td>

<select class="form-control" ng-model="insurance.vehicle" ng-options="vehicle as vehicle.vehicleIDNum for vehicle in allVehicles">

</td>

<div class="form-group">

<td><label for="">保险日期 <span class="text-danger">*</td>

<td></td>

<div class="form-group">

<td><label for="">保险公司 <span class="text-danger">*</td>

<td></td>

<div class="form-group">

<td><label for="">保险类型 <span class="text-danger">*</td>

<td></td>

<div class="form-group">

<td><label for="">保险金额 <span class="text-danger">*</td>

<td></td>

<div class="form-group">

<td><label for="">办理人 <span class="text-danger">*</td>

<td></td>

<div class="form-group">

<td><label for="">备注 <span class="text-danger">*</td>

<td></td>

<div class="form-group" align="right">

<button class="btn btn-primary import-applicant" type="button" ng-click="cancel()">取消

<button class="btn btn-primary import-applicant" type="submit" ng-click="commit(insurance)">提交

</td>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。　

原文链接：https://www.f2er.com/bootstrap/31525.html

Angular-ui-BootStrap组件

上一篇：Bootstrap标签页（Tab）插件切换ec 下一篇：AngularJs的UI组件ui-Bootstrap之T

猜你在找的Bootstrap相关文章

使用BootStrapValidator来完成前端输入验证

BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基...

作者：前端之家时间：2021-02-18

顶求网首页整体设计思路

顶求网首页是一个web2.0博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给...

作者：前端之家时间：2021-02-18

自己手写简约实用的Jquery tabs插件（基于bootstrap环境）

一直想改版网站首页的图书展示部分，以前的展示是使用BootStrap的传统的collapse,网页篇幅...

作者：前端之家时间：2021-02-18

BootStrap中Affix控件的使用方法及如何保持布局的美观

在视窗足够大的时候是没有任何问题的，但是当拖动改变视窗的大小后会发现布局又变乱了，这...

作者：前端之家时间：2021-02-18

针对BootStrap中tabs控件的美化和完善

BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何...

作者：前端之家时间：2021-02-18

使用BootStrap制作用户登录UI

先看看劳动成果布局左右各一半（col-md-6）左侧登录框占左侧一半的10/12 右侧是登录系统...

作者：前端之家时间：2021-02-18

打造简单实用的Thinkphp分页样式(Bootstrap版本)

先吐槽一下ThinkPHP3.1版的分页样式，虽然看起来也很简单大方，但是所有的页码全是使用简单...

作者：前端之家时间：2021-02-18

Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js

在顶求网的首页中我使用了BootStrap的轮播（carousel）插件来展示文章中的图片。我在程序中...

作者：前端之家时间：2021-02-18

移动开发中单页异步加载所有列表项

在做WEB开发的时候我们经常会遇到分页的处理，如果在PC上显示网页的话，使用传统的分页是可...

作者：前端之家时间：2021-02-18

仿豆瓣分类标签的实现

为了和文章分类部分的样式进行区分，我决定自己动手写一个具有其他样式的分类标签集。刚好...

作者：前端之家时间：2021-02-18

最新文章