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


Posted in Javascript onJuly 13, 2018

关于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文件

<script src="js/angular.js"></script>
 <script src="js/angular-route.js"></script>

然后在html中

<h2>示例AngularJS 路由应用</h2>
 <ul>
 <li><a href="#/" rel="external nofollow" >首页</a></li> // 在angular中,用#号后面内容作为路由跳转的路径(因为在浏览器中#号后面的url是被忽略不计的,所以只相当于浏览器处于同一页面,而
 <li><a href="#/computers" rel="external nofollow" >电脑</a></li> //angular根据#号后面的内容来动态更改显示的内容) 
 <li><a href="#/printers" rel="external nofollow" >打印机</a></li> 
 <li><a href="#/blabla" rel="external nofollow" >其他</a></li> 
 </ul> 
 <hr /> 
<div ng-view>
</div> // 用ng-view来显示对应的html视图

在controller中

var myApp = angular.module('myApp',['ngRoute']).config(['$routeProvider', function ($routeProvider) { 
// 首先在模块中加入那个Route依赖,函数中引入$routerProvider
 $routeProvider
 .when('/', {template:'this is main page'}) // 根据提供的when函数来进行相应配置
 .when('/computers',{
 template:'this is conputer page'
 })
 .when('/printers', {
 template:'this is printer page'
 .otherwise({redirectTo: '/'});
}]);

完成

使用ui-router:

ui-router的使用方法://3water.com/article/78895.htm

1. 使用uib-tooltip

<!--使用Uib-tooltip提示框-->
 <div>
 <div class="form-group">
 <button uib-tooltip="this is example" tooltip-placement="right" type="button" class="btn btn-default">
 文本提示框
 </button>
 </div>

 <div class="form-group">
 <button href="#" rel="external nofollow" uib-tooltip-html="htmlToolTip">使用html的提示框</button>
 </div>

 <div class="form-group">
 <button type="text" uib-tooltip-template = "'myTooltipTemplate.html'" tooltip-placement="top-right">模板提示框</button>
 </div>
 </div>
<script type="text/ng-template" id="myTooltipTemplate.html" >
 <div>
 <span>使用模板的提示框</span>
 </div>
</script>

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

<!--使用popover提示框-->
 <div>

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

 </div>

 <div class="form-group" >
 <button uib-popover-html="htmlToolTip" popover-trigger="'mouseenter'">html提示框</button>

 </div>

 <div class="form-group">
 <button uib-popover-template="'myTooltipTemplate.html'" popover-trigger="'mouseenter'" popover-title="tittle here" popover-placement="auto" >模板提示框</button>
 </div>
 </div>

popover的属性有:

popover-animation   true    是否在显示和隐藏时使用动画
popover-append-to-body  false   是否将提示框放在body的末尾
popover-enable  true    是否启用
popover-is-open false   是否显示提示框
popover-placement   top 提示框的位置。可设置的值包括:top,top-left,top-right,bottom,bottom-left,bottom-right,left,left-top,left-bottom,right,right-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参照网址 https://3water.com/article/143727.htm

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

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

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

上代码吧:

指令声明:

emms.directive('emmsSingleDatepicker', function() {

 

 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就在这

<div>

 <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"></i></button>

 </span>

 </span>

 </div>

调用:(别忘了引入指令的js文件)

<emms-single-datepicker ng-model="newAudit.annualDate"></emms-single-datepicker>

3. uib-tab标签页

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

<uib-tabset active="activeJustified" justified="true">
 <uib-tab index="0" heading="汽车" th:include="vehicle/info/templates::car">汽车</uib-tab>
 <uib-tab index="1" heading="工作车" th:include="vehicle/info/templates::audit" select="toAudit()">工作车</uib-tab>
 <uib-tab index="2" heading="可用车辆" th:include="vehicle/info/templates::insurance" select="toInsurance()">可用车辆</uib-tab>
 </uib-tabset>

4. uib-modal 模态框

前台调用:

<a ng-click="openMaintenanceDetail(maintenance)" class="label label-info btn-xs">编辑</a>

打开模态框的函数

$scope.openVehicleDetail = function(vehicle) {

 // 弹出确认窗口

 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

emms.controller('VehicleDeleteCtrl', ['$scope', '$uibModalInstance', ,

 function($scope, $uibModalInstance) {

 $scope.confirm = function() {

 judgeDelete(flag, instance);

 $uibModalInstance.close("close");

 }

 $scope.cancel = function() {

 $uibModalInstance.dismiss("cancel");

 }
 }]);

模态框对应的html模板

<script type="text/ng-template" id="VehicleInsurance.html">
 <div>
 <div class="modal-header">

 <p class="modal-title" align="center">保险信息</p>

 </div>

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

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

 </td>

 <td>

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

  <option >请选择</option>

  </select>

 </td>

 </div> 

 <div class="form-group">

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

 <td><input id="" type="text" class="form-control" ng-model="insurance.date" placeholder="" /></td>

 </div> 

 <div class="form-group">

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

 <td><input id="" type="text" class="form-control" ng-model="insurance.companyName" placeholder="" /></td>

 </div>

 <div class="form-group">

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

 <td><input id="" type="text" class="form-control" ng-model="insurance.type" placeholder="" /></td>

 </div>
 
 <div class="form-group">

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

 <td><input id="" type="text" class="form-control" ng-model="insurance.money" placeholder="" /></td>

 </div>

 <div class="form-group">

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

 <td><input id="" type="text" class="form-control" ng-model="insurance.agent.staffName" placeholder="" /></td>

 </div>

 <div class="form-group">

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

 <td><input id="" type="text" class="form-control" ng-model="insurance.remark" placeholder="" /></td>

 </div>

 

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

 <td colspan=2>

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

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

 </td>

 </div>

 </form>

 </div>
 </div>
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
javascript iframe编程相关代码
Dec 28 Javascript
document.createElement()用法及注意事项(ff下不兼容)
Mar 13 Javascript
让JavaScript和其它资源并发下载的方法
Oct 16 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
2则自己编写的jQuery特效分享
Feb 26 Javascript
jQuery实现可用于博客的动态滑动菜单完整实例
Sep 17 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
jQuery图片左右滚动代码 有左右按钮实例
Jun 20 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
Apr 23 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
Bootstrap标签页(Tab)插件切换echarts不显示问题的解决
Jul 13 #Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 #Javascript
微信小程序实现tab页面切换功能
Jul 13 #Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 #Javascript
vue项目base64字符串转图片的实现代码
Jul 13 #Javascript
angular 组件通信的几种实现方式
Jul 13 #Javascript
JavaScript实现异步图像上传功能
Jul 12 #Javascript
You might like
php实现快速排序的三种方法分享
2014/03/12 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
ThinkPHP模板Volist标签嵌套循环输出多维数组的方法
2016/03/23 PHP
如何在PHP中生成随机数
2020/06/04 PHP
js本身的局限性 别让javascript做太多事
2010/03/23 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
给文字加上着重号的JS代码
2013/11/12 Javascript
js图片实时加载提供网页打开速度
2014/09/11 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
2016/06/14 Javascript
Form表单按回车自动提交表单的实现方法
2016/11/18 Javascript
JAVA中截取字符串substring用法详解
2017/04/14 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
浅谈react前后端同构渲染
2017/09/20 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
结合Vue控制字符和字节的显示个数的示例
2018/05/17 Javascript
vue绑定事件后获取绑定事件中的this方法
2018/09/15 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
[55:16]Mski vs VGJ.S Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python语言技巧之三元运算符使用介绍
2013/03/04 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Python 实现图片转字符画的示例(静态图片,gif皆可)
2020/11/05 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
美国椅子和沙发制造商:La-Z-Boy
2020/10/25 全球购物
2014年房地产个人工作总结
2014/12/20 职场文书
投标售后服务承诺书
2015/04/29 职场文书
大学体育课感想
2015/08/10 职场文书
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
win10电脑关机快捷键是哪个 win10快速关机的几种方法
2022/08/14 数码科技