如何在Angular-ui-中使用BootStrap组件-创新互联
本篇文章给大家分享的是有关如何在Angular-ui-中使用BootStrap组件,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
专注于为中小企业提供成都做网站、网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业同心免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了近1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。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根据#号后面的内容来动态更改显示的内容)
- 打印机
- 其他
在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
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
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://pwwzsj.com/article/dijjos.html