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选项卡动态替换banner图片路径的方法
May 11 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
JS文件上传神器bootstrap fileinput详解
Jan 28 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
利用vue重构有赞商城的思路以及总结整理
Feb 21 Javascript
在Vue中用canvas实现二维码和图片合成海报的方法
Jun 10 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
Mar 02 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
虫族 ZERG 概述
2020/03/14 星际争霸
通过html表格发电子邮件
2006/10/09 PHP
PHP中几个常用的魔术常量
2012/02/23 PHP
php使用百度天气接口示例
2014/04/22 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
php实现图片上传时添加文字和图片水印技巧
2020/04/18 PHP
Yii2.0预定义的别名功能小结
2016/07/04 PHP
php 二维数组快速排序算法的实现代码
2017/10/17 PHP
javascript基础的动画教程,直观易懂
2007/01/10 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
jquery 显示*天*时*分*秒实现时间计时器
2014/05/07 Javascript
Angularjs 滚动加载更多数据
2016/03/17 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
js自定义Tab选项卡效果
2017/06/05 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
在 Vue 中使用 JSX 及使用它的原因浅析
2020/02/10 Javascript
通过数据库对Django进行删除字段和删除模型的操作
2015/07/21 Python
Python实现抓取网页生成Excel文件的方法示例
2017/08/05 Python
Python Socket使用实例
2017/12/18 Python
深入解析Python小白学习【操作列表】
2019/03/23 Python
python如何实现数据的线性拟合
2019/07/19 Python
Django 自定义404 500等错误页面的实现
2020/03/08 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
基于python爬取链家二手房信息代码示例
2020/10/21 Python
VSCODE配置Markdown及Markdown基础语法详解
2021/01/19 Python
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
高中生学习总结的自我评价范文
2013/10/13 职场文书
物流专业自荐信
2014/05/23 职场文书
让世界充满爱演讲稿
2014/05/24 职场文书
电子专业求职信
2014/06/19 职场文书
文明礼貌主题班会
2015/08/14 职场文书
2016年劳模先进事迹材料
2016/02/25 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
Nginx跨域问题解析与解决
2022/08/05 Servers