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中match函数的用法小结
Feb 08 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
json对象与数组以及转换成js对象的简单实现方法
Jun 24 Javascript
JS基于onclick事件实现单个按钮的编辑与保存功能示例
Feb 13 Javascript
初探js和简单隐藏效果的实例
Nov 23 Javascript
微信小程序实现topBar底部选择栏效果
Jul 20 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
详解elementui之el-image-viewer(图片查看器)
Aug 30 Javascript
Vue3.x源码调试的实现方法
Oct 13 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
浅谈vue项目,访问路径#号的问题
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
ajax在joomla中的原生态应用代码
2012/07/19 PHP
php用正则表达式匹配URL的简单方法
2013/11/12 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
[原创]smarty简单模板变量输出方法
2016/07/09 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
javascript new 需不需要继续使用
2009/07/02 Javascript
jquery1.4.2 for Visual studio 2010 模板文件
2010/07/14 Javascript
JS DOM 操作实现代码
2010/08/01 Javascript
15个值得开发人员关注的jQuery开发技巧和心得总结【经典收藏】
2016/05/25 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
vue配置多页面的实现方法
2018/05/22 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
小程序自定义组件实现城市选择功能
2018/07/18 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
JQuery实现ul中添加LI和删除指定的Li元素功能完整示例
2019/10/16 jQuery
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
[47:46]完美世界DOTA2联赛 Magma vs GXR 第三场 11.07
2020/11/10 DOTA
python 切片和range()用法说明
2013/03/24 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
一篇文章了解Python中常见的序列化操作
2019/06/20 Python
Python完成哈夫曼树编码过程及原理详解
2019/07/29 Python
关于pytorch中全连接神经网络搭建两种模式详解
2020/01/14 Python
python_array[0][0]与array[0,0]的区别详解
2020/02/18 Python
Pandas时间序列基础详解(转换,索引,切片)
2020/02/26 Python
浅谈Python中os模块及shutil模块的常规操作
2020/04/03 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
Expected conditions模块使用方法汇总代码解析
2020/08/13 Python
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android