Angular-UI Bootstrap组件实现警报功能

<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>

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); };}

'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; });

<div> <alert ng-repeat="alert in alerts" type="alert.type" close="closeAlert($index)">{{ alert.msg }}</alert></div>

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'];

function ArbitraryCtrl($scope, alertService) { alertService.add("warning", "This is a warning."); alertService.add("error", "This is an error!");}