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 相关文章推荐
Javascript下的keyCode键码值表
Apr 10 Javascript
最短的javascript:地址栏载入脚本代码
Oct 13 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
JavaScript可否多线程? 深入理解JavaScript定时机制
May 23 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
理解javascript async的用法
Aug 22 Javascript
vue的状态管理模式vuex
Nov 30 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
vue中的 $slot 获取插槽的节点实例
Nov 12 Javascript
javascript中的with语句学习笔记及用法
Feb 17 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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中DOMElement操作xml文档实例演示
2013/03/26 PHP
php简单实现快速排序的方法
2015/04/04 PHP
微信支付开发告警通知实例
2016/07/12 PHP
php操纵mysqli数据库的实现方法
2016/09/18 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
Laravel基础_关于view共享数据的示例讲解
2019/10/14 PHP
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
JavaScript中常见获取元素的方法汇总
2015/03/04 Javascript
JS实现的数组全排列输出算法
2015/03/19 Javascript
JS+CSS实现的经典圆角下拉菜单效果代码
2015/10/21 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
js 将input框中的输入自动转化成半角大写(税号输入框)
2017/02/16 Javascript
ES6新特性一: let和const命令详解
2017/04/20 Javascript
Vue.js对象转换实例
2017/06/07 Javascript
React复制到剪贴板的示例代码
2017/08/22 Javascript
帝国cms首页列表页实现点赞功能
2017/10/30 Javascript
微信小程序手机号码验证功能的实例代码
2018/08/28 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
JavaScript简易计算器制作
2020/01/17 Javascript
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
python+opencv实现动态物体追踪
2018/01/09 Python
基于python实现的百度新歌榜、热歌榜下载器(附代码)
2019/08/05 Python
Python类中方法getitem和getattr详解
2019/08/30 Python
python实现静态服务器
2019/09/05 Python
Python如何安装第三方模块
2020/05/28 Python
python3爬虫中异步协程的用法
2020/07/10 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
python 输入字符串生成所有有效的IP地址(LeetCode 93号题)
2020/10/15 Python
数据库什么时候应该被重组
2012/11/02 面试题
Java Servlet的主要功能和作用是什么
2014/02/14 面试题
主题班会开场白
2015/06/01 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
vue配置型表格基于el-table拓展之table-plus组件
2022/04/12 Vue.js