好资源导航 » 文章资讯 » 详解Angular-ui-BootStrap组件的解释以及使用

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

2023-09-10 09:00:05 82

关于UIBootStrap

UIBootStrap是angularUI团队用纯粹angularJS语法编写的Bootstrap组件。

1.关于ng-router（angular-router.js）和ui-router(angular-ui-router.js)的区别

ngroute是用AngularJS框架的路由的核心部分。
ui-router是一个社区库，它是用来提高完善ngroute路由功能的。

实例：

使用ng-router：

首先引入js文件

然后在html中

示例AngularJS路由应用

首页//在angular中，用#号后面内容作为路由跳转的路径（因为在浏览器中#号后面的url是被忽略不计的，所以只相当于浏览器处于同一页面，而
电脑//angular根据#号后面的内容来动态更改显示的内容）
打印机
其他

//用ng-view来显示对应的html视图

在controller中

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

完成

使用ui-router：

ui-router的使用方法：//www.nhooo.com/article/78895.htm

1.使用uib-tooltip





文本提示框




使用html的提示框

模板提示框



使用模板的提示框

tooltip可以使用的属性有：

属性名默认值备注
tooltip-animation true 是否在显示和隐藏时使用动画
tooltip-append-to-body false 是否将提示框放在body的末尾
tooltip-class 加在tooltip上的自定义的类名
tooltip-enable true 是否启用
tooltip-is-openfalse 是否显示提示框
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-delay0 显示提示框前的延迟时间
tooltip-triggermouseenter 显示提示框的触发事件

2.使用popover





文本提示框




html提示框

模板提示框

popover的属性有：

popover-animation true 是否在显示和隐藏时使用动画
popover-append-to-body false 是否将提示框放在body的末尾
popover-enable true 是否启用
popover-is-openfalse 是否显示提示框
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-delay0 显示提示框前的延迟时间
popover-triggermouseenter 显示提示框的触发事件
popover-title 标题

大部分属性和tooltip也是一样的，只是没有popover-class，另外多了个popover-title。

需要注意的一点是，popover的全局配置和tooltip一样，是使用$uibTooltipProvider来配置的。

全局配置tooltip和popover参照网址https://www.nhooo.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:newDate(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-ddHH:mm:ss');

};

}

}

});

指令模板：uib-datepicker就在这

调用：（别忘了引入指令的js文件）

3.uib-tab标签页

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


汽车
工作车
可用车辆

4.uib-modal模态框

前台调用：

编辑

打开模态框的函数

$scope.openVehicleDetail=function(vehicle){

//弹出确认窗口

varmodalInstance=$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模板





保险信息







保险车辆*

















保险日期*







保险公司*







保险类型*







保险金额*







办理人*







备注*











取消

提交

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

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

示例AngularJS路由应用

热门推荐

随机推荐