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

 <h2>示例AngularJS 路由应用</h2><ul> <li>首页</li> // 在angular中，用#号后面内容作为路由跳转的路径（因为在浏览器中#号后面的url是被忽略不计的，所以只相当于浏览器处于同一页面，而 <li>电脑</li> //angular根据#号后面的内容来动态更改显示的内容） <li>打印机</li><li>其他</li></ul><hr /><div> </div> // 用ng-view来显示对应的html视图 

 var myApp = angular.module('myApp',['ngRoute']).config(['$routeProvider', function ($routeProvider) { // 首先在模块中加入那个Route依赖，函数中引入$routerProvider $routeProvider .when('/', {template:'this is main page'}) // 根据提供的when函数来进行相应配置 .when('/computers',<mark style="color:transparent">来源gaodaimacom搞#代%码网</mark>{ template:'this is conputer page' }) .when('/printers', { template:'this is printer page' .otherwise({redirectTo: '/'}); }]); 

 <!--使用Uib-tooltip提示框--><div> <div class="form-group"> <button type="button" class="btn btn-default"> 文本提示框 </button></div><div class="form-group"> <button>使用html的提示框</button></div><div class="form-group"> <button type="text">模板提示框</button></div></div>

 <!--使用popover提示框--><div> <div class="form-group"> <button>文本提示框</button></div><div class="form-group"> <button>html提示框</button></div><div class="form-group"> <button>模板提示框</button></div></div>

 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'); }; } } });

 <div> <span class="input-group input-group-xs" style="width:80%;margin:0 auto"> <span class="input-group-btn"> <button type="button" class="btn btn-default"><i class="glyphicon glyphicon-calendar"></i></button></span></span></div>

  汽车工作车可用车辆

 编辑

 $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); }); }

 emms.controller('VehicleDeleteCtrl', ['$scope', '$uibModalInstance', , function($scope, $uibModalInstance) { $scope.confirm = function() { judgeDelete(flag, instance); $uibModalInstance.close("close"); } $scope.cancel = function() { $uibModalInstance.dismiss("cancel"); } }]);