本篇文章给大家分享的是有关怎么在Angular-UI2使用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-UI2使用Bootstrap组件实现警报功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
