模板提示框
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模板
保险车辆*
|
|
保险日期* |
|
保险公司* |
|
保险类型* |
|
保险金额* |
|
办理人* |
|
备注* |
|
取消
提交
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。