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

关于UI BootStrap

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

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

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

实例:

使用ng-router:

首先引入js文件

<script src="js/angular.js"></script>
 <script src="js/angular-route.js"></script> 

然后在html中

<h2>示例AngularJS 路由应用</h2>
 <ul>
 <li><a href="#/" rel="external nofollow" >首页</a></li> // 在angular中,用#号后面内容作为路由跳转的路径(因为在浏览器中#号后面的url是被忽略不计的,所以只相当于浏览器处于同一页面,而
 <li><a href="#/computers" rel="external nofollow" >电脑</a></li> //angular根据#号后面的内容来动态更改显示的内容)
 <li><a href="#/printers" rel="external nofollow" >打印机</a></li>
 <li><a href="#/blabla" rel="external nofollow" >其他</a></li>
 </ul>
 <hr />
<div ng-view>
</div> // 用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

<!--使用Uib-tooltip提示框-->
 <div>
 <div class="form-group">
 <button uib-tooltip="this is example" tooltip-placement="right" type="button" class="btn btn-default">
 文本提示框
 </button>
 </div>

 <div class="form-group">
 <button href="#" rel="external nofollow" uib-tooltip-html="htmlToolTip">使用html的提示框</button>
 </div>

 <div class="form-group">
 <button type="text" uib-tooltip-template = "'myTooltipTemplate.html'" tooltip-placement="top-right">模板提示框</button>
 </div>
 </div>
<script type="text/ng-template" id="myTooltipTemplate.html" >
 <div>
 <span>使用模板的提示框</span>
 </div>
</script> 

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提示框-->
 <div>

 <div class="form-group">
 <button uib-popover="this is popover box" popover-placement="auto" popover-trigger="'mouseenter'">文本提示框</button>

 </div>

 <div class="form-group" >
 <button uib-popover-html="htmlToolTip" popover-trigger="'mouseenter'">html提示框</button>

 </div>

 <div class="form-group">
 <button uib-popover-template="'myTooltipTemplate.html'" popover-trigger="'mouseenter'" popover-title="tittle here" popover-placement="auto" >模板提示框</button>
 </div>
 </div>

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就在这

<div>

 <span class="input-group input-group-xs" style="width:80%;margin:0 auto;">

 <input type="text" class="form-control" uib-datepicker-popup="{{'yyyy-MM-dd'}}" ng-model="date" is-open="opened"

 clear-text="清空" current-text="今天" ng-required="true" close-text="关闭" ng-change="transformDate()"/>

 <span class="input-group-btn">

 <button type="button" class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>

 </span>

 </span>

 </div>

调用:(别忘了引入指令的js文件)

<emms-single-datepicker ng-model="newAudit.annualDate"></emms-single-datepicker>

3. uib-tab标签页

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

<uib-tabset active="activeJustified" justified="true">
 <uib-tab index="0" heading="汽车" th:include="vehicle/info/templates::car">汽车</uib-tab>
 <uib-tab index="1" heading="工作车" th:include="vehicle/info/templates::audit" select="toAudit()">工作车</uib-tab>
 <uib-tab index="2" heading="可用车辆" th:include="vehicle/info/templates::insurance" select="toInsurance()">可用车辆</uib-tab>
 </uib-tabset> 

4. uib-modal 模态框

前台调用:

<a ng-click="openMaintenanceDetail(maintenance)" class="label label-info btn-xs">编辑</a>

打开模态框的函数

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

<script type="text/ng-template" id="VehicleInsurance.html">
 <div>
 <div class="modal-header">

 <p class="modal-title" align="center">保险信息</p>

 </div>

 <div class="modal-body">
 <form name="VehicleInfo">
 <div class="form-group">

 <td><label for="vehicleType">保险车辆 <span class="text-danger">*</span></label>

 </td>

 <td>

  <select class="form-control" ng-model="insurance.vehicle" ng-options="vehicle as vehicle.vehicleIDNum for vehicle in allVehicles">

  <option >请选择</option>

  </select>

 </td>

 </div> 

 <div class="form-group">

 <td><label for="">保险日期 <span class="text-danger">*</span></label></td>

 <td><input id="" type="text" class="form-control" ng-model="insurance.date" placeholder="" /></td>

 </div> 

 <div class="form-group">

 <td><label for="">保险公司 <span class="text-danger">*</span></label></td>

 <td><input id="" type="text" class="form-control" ng-model="insurance.companyName" placeholder="" /></td>

 </div>

 <div class="form-group">

 <td><label for="">保险类型 <span class="text-danger">*</span></label></td>

 <td><input id="" type="text" class="form-control" ng-model="insurance.type" placeholder="" /></td>

 </div>

 <div class="form-group">

 <td><label for="">保险金额 <span class="text-danger">*</span></label></td>

 <td><input id="" type="text" class="form-control" ng-model="insurance.money" placeholder="" /></td>

 </div>

 <div class="form-group">

 <td><label for="">办理人 <span class="text-danger">*</span></label></td>

 <td><input id="" type="text" class="form-control" ng-model="insurance.agent.staffName" placeholder="" /></td>

 </div>

 <div class="form-group">

 <td><label for="">备注 <span class="text-danger">*</span></label></td>

 <td><input id="" type="text" class="form-control" ng-model="insurance.remark" placeholder="" /></td>

 </div>

 <div class="form-group" align="right">

 <td colspan=2>

  <button class="btn btn-primary import-applicant" type="button" ng-click="cancel()">取消</button>

  <button class="btn btn-primary import-applicant" type="submit" ng-click="commit(insurance)">提交</button>

 </td>

 </div>

 </form>

 </div>
 </div>
</script>

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

(0)

相关推荐

  • Angular ui.bootstrap.pagination分页

    本文实例为大家分享了Angular 分页的具体代码,供大家参考,具体内容如下 1.Html <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>MyPagination</title> <link href="//netdna.bootstrapcdn

  • Angularjs中的ui-bootstrap的使用教程

    1.新建uiBootstrap.html页面,引入依赖的js和css类库 2.新建uiBootstrap.js文件,定义一个uiModule 模块,引入依赖的模块 /** * Created by zhong on 2015/9/7. */ var uiModule = angular.module("uiModule",["ui.bootstrap","ui.router"]); }); 3.定义dialog弹出窗口的模板 4.定义一个 UiC

  • 详解Angular父子组件通讯

    概述 Angular组件间通讯 组件树,1号是根组件AppComponent. 组件之间松耦合,组件之间知道的越少越好. 组件4里面点击按钮,触发组件5的初始化逻辑. 传统做法:在按钮4的点击事件里调用组件5的方法.紧密耦合. Angular:在组件4根本不知道组件5存在的情况下实现. 使用松耦合的方式在组件之间传递数据开发出高重用性的组件. 使用输入输出属性在父子关系的组件之间传递数据. 一.输入输出属性概述 组件设计成黑盒模型,用输入属性声明从外部世界接收什么东西.不需要知道这些东西从哪里来

  • 详解Angular动态组件

    使用场景 我们先明确下动态组件的使用场景,在代码运行时要动态加载组件,换成普通人话,代码需要根据具体情况(比如用户的操作,向后台请求结果)确定在某些地方加载某些组件,这些组件不是静态的(不是固定的). 官网的举例就是,构建动态广告条,广告组件不断会推出新的,再用只支持静态组件结构的模板显然是不现实的. 再举一个常见的例子,动态弹出框,弹出的组件是不确定的.不断更新的,这里那里弹出个购买框,那那那又需要弹出样式选择框,静态组件结构模板是不能满足群众日渐增长的需求. 怎么实现 然后我们来找个把手,看

  • 详解Angular组件之投影

    概述 运行时动态改变组件模版的内容.没路由那么复杂,只是一段html,没有业务逻辑. ngContent指令将父组件模版上的任意片段投影到子组件上. 一.简单例子 1.子组件中使用<ng-content>指令来标记投影点 <div class="wrapper"> <h2>我是子组件</h2> <div>这个div定义在子组件中</div> <ng-content></ng-content>

  • 详解Angular组件之生命周期(二)

    一.view钩子 view钩子有2个,ngAfterViewInit和ngAfterViewChecked钩子. 1.实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项 以父组件调用子组件方法中例子为基础,在父组件中实现ngAfterViewInit和ngAfterViewChecked钩子. 这两个钩子是在组件的模版所有内容组装完成后,组件模版已经呈现给用户看了,之后这两个钩子方法会被调用. @ViewChild('child1') child1:Child

  • 详解Angular组件生命周期(一)

    概述 组件声明周期以及angular的变化发现机制 红色方法只执行一次. 变更检测执行的绿色方法和和组件初始化阶段执行的绿色方法是一个方法. 总共9个方法. 每个钩子都是@angular/core库里定义的接口. import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-life', templateUrl: './life.component.html', styleUrls: ['./life

  • 详解Angular组件之中间人模式

    一.中间人模式 该组件树中除了组件1以外,每个组件都有一个父组件可以扮演中间人的角色.顶级的中间人是组件1,它可以使组件2,组件3,组件6之间互相通讯.依次类推,组件2是组件4和组件5的中间人.组件3是组件7和组件8的中间人. 中间人负责从一个组件接收数据并将其传递给另一个组件. 二.例子 股票报价组件为例,假设交易员在监看着报价组件的价格,当股票价格达到某一个值的时候,交易员会点一个购买按钮,来购买股票.问题:报价组件并不知道应该如何下单来买股票,它只是用来监控股票价格的.所以报价组件在这时应

  • 详解Angular组件数据不能实时更新到视图上的问题

    目录 问题起源 OnPush策略 当前组件或子组件之一触发了事件 总结 问题起源 MainComponent: @Component({ selector: 'main', template: ` <MenuComponent [isReport]="isReport"> </MenuComponent> `, changeDetection:ChangeDetectionStrategy.OnPush }) export class MainComponent

  • 详解Angular数据绑定及其实现方式

    前言 Web开发需要模型和视图之间的数据同步.这些模型基本上包含数据值,而视图则处理用户看到的内容.因此,如果您想知道这在Angular中是如何发生的,这篇有关Angular数据绑定的文章将为您提供帮助. 下面提到的是此处讨论的主题: What is Data Binding? Types of Data Binding in Angular One-way Data Binding Interpolation Property Binding Event Binding Two-way Dat

  • 详解Angular项目中共享模块的实现

    目录 一.共享CommonModule 二.共享MaterialModule 三.共享ConfirmDialog 一.共享CommonModule 创建share Modele:ng g m share import进来所有需要共享的模块都export出去, 暂时只有CommonModule,以后会有一些需要共享的组件. import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'

  • 详解Angular中$cacheFactory缓存的使用

    最近在学习使用angular,慢慢从jquery ui转型到用ng开发,发现了很多不同点,继续学习吧: 首先创建一个服务,以便在项目中的controller中引用,服务有几种存在形式,factory();service();constant();value();provider();其中provider是最基础的,其他服务都是基于这个写的,具体区别这里就不展开了,大家可以看看源码:服务是各个controller之间通话的重要形式,在实际项目中会用的很多,下面是代码: angular.module

随机推荐