alert指令会在页面上显示一条提示消息，效果是这样：

代码为：

 <!DOCTYPE html>

 <html ng-app="ui.bootstrap.demo" xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <link href="/Content/bootstrap.css" rel="stylesheet" />

     <title></title>

     <script src="/Scripts/angular.js"></script>

     <script src="/Scripts/ui-bootstrap-tpls-1.3.2.js"></script>

     <script>

         angular.module('ui.bootstrap.demo', ['ui.bootstrap']).controller('AlertDemoCtrl', function ($scope) {

             $scope.alerts = [

               { type: 'danger', msg: '出错消息' },

               { type: 'success', msg: '成功消息' },

             { type: 'info', msg: '提示消息' },

             { type: 'warning', msg: '警告信息' }

             ];

             $scope.addAlert = function () {

                 $scope.alerts.push({ msg: '这是一条消息!' });

             };

             $scope.closeAlert = function (index) {

                 $scope.alerts.splice(index, 1);

             };

             $scope.addTplAlert = function () {

             }

         });

     </script>

     <script type="text/ng-template" id="alert.html">

         <div class="alert" style="background-color:#fa39c3;color:white" role="alert">

             <div ng-transclude></div>

         </div>

     </script>

 </head>

 <body>

     <div ng-controller="AlertDemoCtrl">

         <uib-alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}</uib-alert>

         <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button>

         <hr />

         <uib-alert template-url="alert.html">一个使用自定义模板的警告框!</uib-alert>

     </div>

 </body>

 </html>

alert指令可以使用的属性有：

属性名 默认值 备注
close   提示消息关闭时所触发的函数。如果有这个属性，提示消息的右侧会添加一个关闭按钮
dismiss-on-timeout none 在有close属性的前提下，设置一个自动关闭提示消息的时间（毫秒）
template-url uib/template/alert/alert.html  
type warning 提示消息的类型。可配置的值有：danger，warning，info，success

目录：

AngularJs的UI组件ui-Bootstrap分享（一）

AngularJs的UI组件ui-Bootstrap分享（二）——Collapse

AngularJs的UI组件ui-Bootstrap分享（三）——Accordion

AngularJs的UI组件ui-Bootstrap分享（四）——Datepicker Popup

AngularJs的UI组件ui-Bootstrap分享（五）——Pager和Pagination

AngularJs的UI组件ui-Bootstrap分享（六）——Tabs

AngularJs的UI组件ui-Bootstrap分享（七）——Buttons和Dropdown

AngularJs的UI组件ui-Bootstrap分享（八）——Tooltip和Popover

AngularJs的UI组件ui-Bootstrap分享（九）——Alert

AngularJs的UI组件ui-Bootstrap分享（十）——Model

AngularJs的UI组件ui-Bootstrap分享（十一）——Typeahead

AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

AngularJs的UI组件ui-Bootstrap分享（九）——Alert的更多相关文章

  1. Ionic4.x 中的 UI 组件(UI Components) 侧边栏ion-menu组件以及底部tabs结合 侧边栏 ion-menu

    1.侧边栏 ion-menu 组件的基本使用 1.创建项目 ionic start myApp sidemenu 2.配置项目 属性 作用 可选值 side 配置侧边栏的位置 start end me ...

  2. Ionic4.x 中的 UI 组件(UI Components) 日期组件

    1.日期组件的基本使用 官方文档:https://ionicframework.com/docs/api/datetime 模板中: <ion-datetime display-format=& ...

  3. Ionic4.x 中的 UI 组件(UI Components) Slides 轮播图组件、Searchbar 组件、 Segment 组件

    Slides 轮播图组件 Ionic4.x 中的轮播图组件是基于 swiper 插件,所以配置 slides 的属性需要在 swiper 的 api 中 找 Swiper Api:http://ida ...

  4. Ionic4.x 中的 UI 组件(UI Components)表单相关组件

    1.ion-input 单行文本框 2.ion-toggle 开关 3.ion-radio-group.ion-radio 单选按钮组 4.ion-checkbox 多选按钮组 5.ion-selec ...

  5. 挂号平台首页开发（UI组件部分）

    JQ插件模式开发UI组件 JQ插件开发方法: 1.$.extend() 扩展JQ(比较简单,功能略显不足) $.extend({ sayHello:function(){ console.log(&q ...

  6. AngularJs的UI组件ui-Bootstrap分享（一）

    最近几个月学习了AngularJs和扩展的UI组件,并在公司小组内做了一次分享交流,感觉很有收获,在此记录下个人的学习心得. 目录: AngularJs的UI组件ui-Bootstrap分享(一) A ...

  7. AngularJs的UI组件ui-Bootstrap分享（十四）——Carousel

    Carousel指令是用于图片轮播的控件,引入ngTouch模块后可以在移动端使用滑动的方式使用轮播控件. <!DOCTYPE html> <html ng-app="ui ...

  8. AngularJs的UI组件ui-Bootstrap分享（十三）——Progressbar

    进度条控件有两种指令,第一种是uib-progressbar指令,表示单一颜色和进度的一个进度条.第二种是uib-bar和uib-progress指令,表示多种颜色和多个进度组合而成的一个进度条. 这 ...

  9. AngularJs的UI组件ui-Bootstrap分享（十二）——Rating

    Rating是一个用于打分或排名的控件.看一个最简单的例子: <!DOCTYPE html> <html ng-app="ui.bootstrap.demo" x ...

随机推荐

  1. Git_1基础操作,从安装到提交完成(windows)

    github地址:https://github.com/zhangsai521314/Git 1:安装Git Bash(https://git-scm.com/),安装一路NEXT. 2:目录架构: ...

  2. newInstance()和new()

    在Java开发特别是数据库开发中,经常会用到Class.forName( )这个方法.通过查询Java Documentation我们会发现使用Class.forName( )静态方法的目的是为了动态 ...

  3. language model —— basic model 语言模型之基础模型

    一.发展 起源:统计语言模型起源于 Ponte 和 Croft 在 1998年的 SIGIR上发表的论文 应用:语言模型的应用很多: corsslingual retrieval distribute ...

  4. DISCUZ官方论坛模仿开发日志（二）

    接上一次日志:http://www.cnblogs.com/gcs1995/p/4091159.html 从上次写下项目简要分析到现在差不多两个月时间了,这两个月时间学习了很多新技术: 数据库技术: ...

  5. mysql mybatis-generator plugin 有page实体类的分页

    page实体类 package cn.zsmy.tmp; import java.io.Serializable; /** * 分页对象. * */public final class Page im ...

  6. EasyUI 的Tab 标签添加右键菜单

    样式: 主要提供右键功能代码. (只需要提供你需要的js和css就行了) <!doctype html> <html> <head> <base href=& ...

  7. python多线程

    python多线程有两种用法,一种是在函数中使用,一种是放在类中使用 1.在函数中使用 定义空的线程列表 threads=[] 创建线程 t=threading.Thread(target=函数名,a ...

  8. 剔除eclipse的configuration目录[转]

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  9. centos6.5安装lnmp环境

    1.安装nignx的源,默认cenots6没有的. rpm -ivh http://nginx.org/packages/centos/6/noarch/RPMS/nginx-release-cent ...

  10. 学习笔记找到多个具有相同 ID“_header”的控件,FindControl 要求控件具有唯一的 ID.

    解决 找到多个具有相同 ID“_header”的控件,FindControl 要求控件具有唯一的 ID. private void DisplayHotBooks()    {        //获取 ...