詳解Angular-ui-BootStrap組件的解釋以及使用

更新時(shí)間：2018年07月13日 10:12:49 作者：果感

這篇文章主要介紹了詳解Angular-ui-BootStrap組件的解釋以及使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧

關(guān)于UI BootStrap

UI BootStrap 是angularUI團(tuán)隊(duì)用純粹angularJS語(yǔ)法編寫的Bootstrap組件。

1. 關(guān)于ng-router（angular-router.js）和ui-router(angular-ui-router.js)的區(qū)別

ngroute是用AngularJS框架的路由的核心部分。
ui-router是一個(gè)社區(qū)庫(kù)，它是用來(lái)提高完善ngroute路由功能的。

實(shí)例：

使用ng-router：

首先引入js文件

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

然后在html中

<h2>示例AngularJS 路由應(yīng)用</h2>
 <ul>
 <li><a href="#/" rel="external nofollow" >首頁(yè)</a></li> // 在angular中，用#號(hào)后面內(nèi)容作為路由跳轉(zhuǎn)的路徑（因?yàn)樵跒g覽器中#號(hào)后面的url是被忽略不計(jì)的，所以只相當(dāng)于瀏覽器處于同一頁(yè)面，而
 <li><a href="#/computers" rel="external nofollow" >電腦</a></li> //angular根據(jù)#號(hào)后面的內(nèi)容來(lái)動(dòng)態(tài)更改顯示的內(nèi)容） 
 <li><a href="#/printers" rel="external nofollow" >打印機(jī)</a></li> 
 <li><a href="#/blabla" rel="external nofollow" >其他</a></li> 
 </ul> 
 <hr /> 
<div ng-view>
</div> // 用ng-view來(lái)顯示對(duì)應(yīng)的html視圖

在controller中

var myApp = angular.module('myApp',['ngRoute']).config(['$routeProvider', function ($routeProvider) { 
// 首先在模塊中加入那個(gè)Route依賴，函數(shù)中引入$routerProvider
 $routeProvider
 .when('/', {template:'this is main page'}) // 根據(jù)提供的when函數(shù)來(lái)進(jìn)行相應(yīng)配置
 .when('/computers',{
 template:'this is conputer page'
 })
 .when('/printers', {
 template:'this is printer page'
 .otherwise({redirectTo: '/'});
}]);

完成

使用ui-router：

ui-router的使用方法：//www.dhdzp.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可以使用的屬性有：

屬性名默認(rèn)值備注
tooltip-animation   true    是否在顯示和隱藏時(shí)使用動(dòng)畫
tooltip-append-to-body false   是否將提示框放在body的末尾
tooltip-class       加在tooltip上的自定義的類名
tooltip-enable true    是否啟用
tooltip-is-open false   是否顯示提示框
tooltip-placement   top 提示框的位置?？稍O(shè)置的值包括：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   關(guān)閉提示框前的延遲時(shí)間
tooltip-popup-delay 0   顯示提示框前的延遲時(shí)間
tooltip-trigger mouseenter 顯示提示框的觸發(fā)事件

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    是否在顯示和隱藏時(shí)使用動(dòng)畫
popover-append-to-body false   是否將提示框放在body的末尾
popover-enable true    是否啟用
popover-is-open false   是否顯示提示框
popover-placement   top 提示框的位置。可設(shè)置的值包括：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   關(guān)閉提示框前的延遲時(shí)間
popover-popup-delay 0   顯示提示框前的延遲時(shí)間
popover-trigger mouseenter 顯示提示框的觸發(fā)事件
popover-title       標(biāo)題

大部分屬性和tooltip也是一樣的，只是沒有popover-class，另外多了個(gè)popover-title。

需要注意的一點(diǎn)是，popover的全局配置和tooltip一樣，是使用$uibTooltipProvider來(lái)配置的。

全局配置tooltip和popover參照網(wǎng)址 http://www.dhdzp.com/article/143727.htm

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

這個(gè)插件是datepicker只能獲取日期！不是datetimepicker！還有一個(gè)叫timepicker，真納悶為什么angular團(tuán)隊(duì)不把這兩個(gè)插件組成一個(gè)。。。

因?yàn)轫?xiàng)目用到的第三方庫(kù)實(shí)在太多，不愿意再去別的地方再弄一個(gè)時(shí)間控件，所以就用了angular自帶的這個(gè)，說(shuō)實(shí)話，很一般。。。

上代碼吧：

指令聲明：

 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="關(guān)閉" 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>

調(diào)用：（別忘了引入指令的js文件）

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

3. uib-tab標(biāo)簽頁(yè)

直接在要使用的div或者容器內(nèi)使用

<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 模態(tài)框

前臺(tái)調(diào)用：

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

打開模態(tài)框的函數(shù)

$scope.openVehicleDetail = function(vehicle) {

 // 彈出確認(rèn)窗口

 var modalInstance = $uibModal.open({

 templateUrl: 'vehicle-detail.html',

 controller: 'VehicleDetailCtrl',

 animation: true,

 resolve: {

  vehicle: vehicle,

  allTypes: function() {

  return $scope.allTypes;

  }

 },

 size: 'lg'

 });

 // 更新頁(yè)面內(nèi)容

 modalInstance.result.then(function(response) {

 refreshByCloseStatus(response, $scope.vehicles);

 });

 }

模態(tài)框?qū)?yīng)的controller

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

 function($scope, $uibModalInstance) {

 $scope.confirm = function() {

 judgeDelete(flag, instance);

 $uibModalInstance.close("close");

 }

 $scope.cancel = function() {

 $uibModalInstance.dismiss("cancel");

 }
 }]);

模態(tài)框?qū)?yīng)的html模板

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

 <p class="modal-title" align="center">保險(xiǎn)信息</p>

 </div>

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

 <td><label for="vehicleType">保險(xiǎn)車輛 <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 >請(qǐng)選擇</option>

  </select>

 </td>

 </div> 

 <div class="form-group">

 <td><label for="">保險(xiǎn)日期 <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="">保險(xiǎn)公司 <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="">保險(xiǎn)類型 <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="">保險(xiǎn)金額 <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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家?！?/p>

您可能感興趣的文章: