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 相关文章推荐
Prototype使用指南之ajax
Jan 10 Javascript
浅谈Javascript事件模拟
Jun 27 Javascript
jquery ajax同步异步的执行最终解决方案
Apr 26 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
Feb 16 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
web打印小结
Jan 11 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
浅谈vuex中store的命名空间
Nov 08 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
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
PHP 数组基本操作方法详解
2016/06/17 PHP
Yii2框架配置文件(Application属性)与调试技巧实例分析
2019/05/27 PHP
js不是基础的基础
2006/12/24 Javascript
Javascript变量函数浅析
2011/09/02 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
2012/04/26 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
javascript实现倒计时(精确到秒)
2015/06/26 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
JavaScript html5 canvas绘制时钟效果
2016/03/01 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
2016/06/23 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
js学习总结之DOM2兼容处理重复问题的解决方法
2017/07/27 Javascript
详解Vue-cli中的静态资源管理(src/assets和static/的区别)
2018/06/19 Javascript
jQuery实现动态添加和删除input框代码实例
2019/03/29 jQuery
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
2019/09/04 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
Python3实现连接SQLite数据库的方法
2014/08/23 Python
pandas表连接 索引上的合并方法
2018/06/08 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
Python中collections模块的基本使用教程
2018/12/07 Python
python整小时 整天时间戳获取算法示例
2019/02/20 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
Python队列、进程间通信、线程案例
2019/10/25 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
餐饮业创业计划书范文
2014/01/06 职场文书
2014教师研修学习体会
2014/07/08 职场文书
辞职信的写法
2015/02/27 职场文书
家庭经济困难证明
2015/06/23 职场文书
如何写新闻稿
2015/07/18 职场文书