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实现的当离开页面时出现提示的实现代码
Jun 27 Javascript
jquery获得下拉框值的代码
Aug 13 Javascript
JS网页在线获取鼠标坐标值的方法
Feb 28 Javascript
跟我学习javascript的循环
Nov 18 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
AngularJS包括详解及示例代码
Aug 17 Javascript
JS实现的二叉树算法完整实例
Apr 06 Javascript
详解Vue-Cli 异步加载数据的一些注意点
Aug 12 Javascript
vue 虚拟dom的patch源码分析
Mar 01 Javascript
element vue Array数组和Map对象的添加与删除操作
Nov 14 Javascript
JS动态图片的实现方法完整示例
Jan 13 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
Windows下安装Memcached的步骤说明
2010/04/25 PHP
php+memcache实现的网站在线人数统计代码
2014/07/04 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
学习php设计模式 php实现工厂模式(factory)
2015/12/07 PHP
PHP基于单例模式实现的mysql类
2016/01/09 PHP
PHP 7.1新特性的汇总介绍
2016/12/16 PHP
php插入mysql数据返回id的方法
2018/05/31 PHP
php伪静态验证码不显示的解决方案
2019/09/26 PHP
TP5框架实现一次选择多张图片并预览的方法示例
2020/04/04 PHP
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
AngularJS内置指令
2015/02/04 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
微信小程序多张图片上传功能
2017/06/07 Javascript
Vuejs中使用markdown服务器端渲染的示例
2017/11/22 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
2018/03/09 jQuery
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
node将geojson转shp返回给前端的实现方法
2019/05/29 Javascript
[02:26]2016国际邀请赛8月3日开战 中国军团出征西雅图
2016/08/02 DOTA
简单介绍Python中的JSON使用
2015/04/28 Python
python简单实现操作Mysql数据库
2018/01/29 Python
利用Python小工具实现3秒钟将视频转换为音频
2019/10/29 Python
Python基于Dlib的人脸识别系统的实现
2020/02/26 Python
基于Python fminunc 的替代方法
2020/02/29 Python
Python如何爬取b站热门视频并导入Excel
2020/08/10 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
为您的家、后院、车库等在线购物:Spreetail
2019/06/17 全球购物
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
技术总监管理职责范本
2014/03/06 职场文书
2014年药房工作总结
2014/11/22 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
win7配置本地ftp服务器的图文教程
2022/08/05 Servers