详解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 二分法(数组array)
Apr 24 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
js实现简易的单数字随机抽奖(0-9)
Mar 19 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
Dec 21 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
Jun 07 jQuery
Vue2.0子同级组件之间数据交互方法
Feb 28 Javascript
angular5 httpclient的示例实战
Mar 12 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
谈谈为什么你的 JavaScript 代码如此冗长
Jan 30 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
Jul 06 Javascript
5种方法告诉你如何使JavaScript 代码库更干净
Sep 15 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 文件状态缓存带来的问题
2008/12/14 PHP
fleaphp crud操作之find函数的使用方法
2011/04/23 PHP
phplot生成图片类用法详解
2015/01/06 PHP
PHP中使用mpdf 导出PDF文件的实现方法
2018/10/22 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
javascript实现验证身份证号的有效性并提示
2015/04/30 Javascript
JavaScript的9种继承实现方式归纳
2015/05/18 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
使用bootstrap3开发响应式网站
2016/05/12 Javascript
javascript高仿热血传奇游戏实现代码
2018/02/22 Javascript
vue获取当前点击的元素并传值的实例
2018/03/09 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
2018/08/30 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
VUE+node(express)实现前后端分离
2019/10/13 Javascript
vuex存储token示例
2019/11/11 Javascript
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
Python 异常处理实例详解
2014/03/12 Python
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
Python实现针对中文排序的方法
2017/05/09 Python
浅谈python中的正则表达式(re模块)
2017/10/17 Python
解决新django中的path不能使用正则表达式的问题
2018/12/18 Python
PySide和PyQt加载ui文件的两种方法
2019/02/27 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
tf.concat中axis的含义与使用详解
2020/02/07 Python
django admin 添加自定义链接方式
2020/03/11 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
"火柴棍式"程序员面试题
2014/03/16 面试题
《黄河颂》教学反思
2014/02/07 职场文书
毕业证委托书范文
2014/09/26 职场文书
2015年重阳节活动主持词
2015/07/30 职场文书