详解Angular-ui-BootStrap组件的解释以及使用
关于UI BootStrapUI BootStrap 是angularUI团队用纯粹angularJS语法编写的Bootstrap组件。 1. 关于ng-router（angular-router.js）和ui-router(angular-ui-router.js)的区别
实例： 使用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"> <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模板 <p class="modal-title" align="center">保险信息
<div class="modal-body"> <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> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
|