Angular-UI Bootstrap组件实现警报功能


Posted in Javascript onJuly 16, 2018

Angular-UI Bootstrap提供了许多组件,从流行的的Bootstrap项目移植到Angular 指令(显著的减少了代码量)。如果你计划在Angular应用中使用Bootstrap组件,我建议细心检查。话虽如此,直接使用Bootstrap,应该也是可以工作的。

Angular controller可以共享service的代码。警报就是把service代码共享到controller的很好用例之一。

Angular-UI Bootstrap文档提供了下面的例子:

view

<div ng-controller="AlertDemoCtrl">
 <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{alert.msg}}</alert>
 <button class='btn' ng-click="addAlert()">Add Alert</button>
</div>

controller

function AlertDemoCtrl($scope) {
 $scope.alerts = [
  { type: 'error', msg: 'Oh snap! Change a few things up and try submitting again.' }, 
  { type: 'success', msg: 'Well done! You successfully read this important alert message.' }
 ];

 $scope.addAlert = function() {
  $scope.alerts.push({msg: "Another alert!"});
 };

 $scope.closeAlert = function(index) {
  $scope.alerts.splice(index, 1);
 };
}

鉴于我们要在app中的不同的控制器中创建警报,并且跨控制器的代码不好引用,我们将要把它移到service中。

alertService

'use strict';
/* services.js */
// don't forget to declare this service module as a dependency in your main app constructor!
var appServices = angular.module('appApp.services', []);
appServices.factory('alertService', function($rootScope) {
  var alertService = {};
  // create an array of alerts available globally
  $rootScope.alerts = [];
  alertService.add = function(type, msg) {
   $rootScope.alerts.push({'type': type, 'msg': msg});
  };
  alertService.closeAlert = function(index) {
   $rootScope.alerts.splice(index, 1);
  };
  return alertService;
 });

view

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

最后,我们需要将alertService's中的closeAlert()方法绑定到$globalScope。

controller

function RootCtrl($rootScope, $location, alertService) {
 $rootScope.changeView = function(view) {
  $location.path(view);
 }
 // root binding for alertService
 $rootScope.closeAlert = alertService.closeAlert; 
}
RootCtrl.$inject = ['$scope', '$location', 'alertService'];

我不完全赞同这种全局绑定,我希望的是直接从警报指令中的close data属性中调用service方法,我不清楚为什么不这样来实现。

现在创建一个警报只需要从你的任何一个控制器中调用alertService.add()方法。

function ArbitraryCtrl($scope, alertService) {
 alertService.add("warning", "This is a warning.");
 alertService.add("error", "This is an error!");
}

总结

以上所述是小编给大家介绍的Angular-UI Bootstrap组件实现警报功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JQuery 学习笔记 选择器之一
Jul 23 Javascript
浅析js中取绝对值的2种方法
Jul 09 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
Apr 02 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
关于原生js中bind函数的简单实现
Aug 10 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
使用DataTable插件实现异步加载数据
Nov 19 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
Aug 06 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
JS在if中的强制类型转换方式
Jul 15 #Javascript
微信小程序form表单组件示例代码
Jul 15 #Javascript
微信小程序仿朋友圈发布动态功能
Jul 15 #Javascript
Bootstrap Table中的多选框删除功能
Jul 15 #Javascript
详解JavaScript 中 if / if...else...替换方式
Jul 15 #Javascript
简述JS控制台的使用
Jul 15 #Javascript
简述JS浏览器的三种弹窗
Jul 15 #Javascript
You might like
PHP面向对象学习笔记之二 生成对象的设计模式
2012/10/06 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
Yii 框架入口脚本示例分析
2020/05/19 PHP
JS代码放在head和body中的区别分析
2011/12/01 Javascript
Javascript高级技巧分享
2014/02/25 Javascript
自编jQuery插件实现模拟alert和confirm
2014/09/01 Javascript
jquery实现弹出层登录和全屏层注册特效
2015/08/28 Javascript
JavaScript解八皇后问题的方法总结
2016/06/12 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
原生js开发的日历插件
2017/02/04 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
vue.js实现左边导航切换右边内容
2019/10/21 Javascript
JS函数进阶之继承用法实例分析
2020/01/15 Javascript
vue路由的配置和页面切换详解
2020/09/09 Javascript
对Python使用mfcc的两种方式详解
2019/01/09 Python
Python3从零开始搭建一个语音对话机器人的实现
2019/08/23 Python
Django与pyecharts结合的实例代码
2020/05/13 Python
用JAVA SOCKET编程,读服务器几个字符,再写入本地显示
2012/11/25 面试题
物流管理专业应届生求职信
2013/11/21 职场文书
心得体会开头
2014/01/01 职场文书
医生进修自我鉴定
2014/01/19 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
市场营销工作计划书
2014/09/15 职场文书
三严三实对照检查材料思想汇报
2014/09/28 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
男方婚前保证书
2015/02/28 职场文书
新郎父母婚礼答谢词
2015/09/29 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL