详解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动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
网页广告中JS代码的信息监听示例
Apr 02 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
JS实现图片上传预览功能
Nov 21 Javascript
js 输入框 正则表达式(菜鸟必看教程)
Feb 19 Javascript
jquery实现提示语淡入效果
May 05 jQuery
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
jQuery实现的分页插件完整示例
May 26 jQuery
Vue 使用typescript如何优雅的调用swagger API
Sep 01 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
laravel实现按月或天或小时统计mysql数据的方法
2019/10/09 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
2015/07/10 Javascript
纯JS代码实现气泡效果
2016/05/04 Javascript
JavaScript数据存储 Cookie篇
2016/07/02 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
Angular 4.x 路由快速入门学习
2017/05/03 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
vue子父组件通信的实现代码
2017/07/09 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
在vue中v-bind使用三目运算符绑定class的实例
2018/09/29 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
详解python实现读取邮件数据并下载附件的实例
2017/08/03 Python
Python探索之自定义实现线程池
2017/10/27 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
在Python中,不用while和for循环遍历列表的实例
2019/02/20 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
Python命令行click参数用法解析
2019/12/19 Python
python 解决pycharm运行py文件只有unittest选项的问题
2020/09/01 Python
HTML5中的进度条progress元素简介及兼容性处理
2016/06/02 HTML / CSS
《童年的发现》教学反思
2014/02/14 职场文书
我们的节日清明节活动方案
2014/03/05 职场文书
户籍证明格式
2014/09/15 职场文书
走群众路线学习心得体会
2014/10/31 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
goland设置颜色和字体的操作
2021/05/05 Golang
python playwright 自动等待和断言详解
2021/11/27 Python