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 相关文章推荐
js刷新框架子页面的七种方法代码
Nov 20 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
JS判断字符串包含的方法
May 05 Javascript
JavaScript清空数组元素的两种方法简单比较
Jul 10 Javascript
vuejs动态组件给子组件传递数据的方法详解
Sep 09 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
JavaScript中callee和caller的区别与用法实例分析
Jun 28 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
Vue仿微信app页面跳转动画效果
Aug 21 Javascript
vue.js实现三级菜单效果
Oct 19 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 分页类 扩展代码
2009/06/11 PHP
php+mysql事务rollback&amp;commit示例
2010/02/08 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
PHP小技巧之JS和CSS优化工具Minify的使用方法
2014/05/19 PHP
ThinkPHP有变量的where条件分页实例
2014/11/03 PHP
php数组分页实现方法
2016/04/30 PHP
PHP下载文件的函数实例代码
2016/05/18 PHP
仅用[]()+!等符号就足以实现几乎任意Javascript代码
2010/03/01 Javascript
JS中confirm,alert,prompt函数区别分析
2011/01/17 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
jQuery trigger()方法用法介绍
2015/01/13 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
vue与原生app的对接交互的方法(混合开发)
2018/11/28 Javascript
CryptoJS中AES实现前后端通用加解密技术
2018/12/18 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
vue 使用v-for进行循环的实例代码详解
2020/02/19 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
Python3实现的Mysql数据库操作封装类
2018/06/06 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
Python编程快速上手——疯狂填词程序实现方法分析
2020/02/29 Python
解决更改AUTH_USER_MODEL后出现的问题
2020/05/14 Python
微信小程序之html5 canvas绘图并保存到系统相册
2019/06/20 HTML / CSS
纽约现代艺术博物馆商店:MoMA STORE(室内家具和杂货商品)
2016/08/02 全球购物
入党思想汇报怎么写
2014/04/03 职场文书
赡养老人协议书
2014/04/21 职场文书
pytorch损失反向传播后梯度为none的问题
2021/05/12 Python
python自动计算图像数据集的RGB均值
2021/06/18 Python
springcloud之Feign超时问题的解决
2021/06/24 Java/Android