精准传达 • 有效沟通
从品牌网站建设到网络营销策划，从策略到执行的一站式服务
如何在Angular-ui-中使用BootStrap组件
本篇文章给大家分享的是有关如何在Angular-ui-中使用BootStrap组件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。
创新互联建站专业为企业提供沁阳网站建设、沁阳做网站、沁阳网站设计、沁阳网站制作等企业网站建设、网页设计与制作、沁阳企业网站模板建站服务，十年沁阳做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。
1. 关于ng-router（angular-router.js）和ui-router(angular-ui-router.js)的区别
实例：
使用ng-router：
首先引入js文件
然后在html中
示例AngularJS 路由应用
- 首页
// 在angular中，用#号后面内容作为路由跳转的路径（因为在浏览器中#号后面的url是被忽略不计的，所以只相当于浏览器处于同一页面，而
- 电脑
//angular根据#号后面的内容来动态更改显示的内容）
- 打印机
- 其他
// 用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的使用方法：//www.jb51.net/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-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
html提示框
模板提示框
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://www.jb51.net/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就在这
调用：（别忘了引入指令的js文件）
3. uib-tab标签页
直接在要使用的div或者容器内使用
汽车
工作车
可用车辆
4. uib-modal 模态框
前台调用：
编辑
打开模态框的函数
$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模板
| 保险车辆 *
|
请选择
|
保险日期 * |
|
保险公司 * |
|
保险类型 * |
|
保险金额 * |
|
办理人 * |
|
备注 * |
|
取消
提交
以上就是如何在Angular-ui-中使用BootStrap组件，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
当前名称：如何在Angular-ui-中使用BootStrap组件
文章起源：http://cdkjz.cn/article/jeiceo.html
