<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@2.3.2" data-semver="2.3.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" />
<script data-require="angular.js@1.0.7" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script data-require="angular-ui-bootstrap@0.5.0" data-semver="0.5.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.5.0.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp">
spacer goes here
<div>
<alert ng-repeat="alert in alerts" type="alert.type" close="alert.close()">{{alert.msg}}</alert>
</div>
<div ng-controller="MainCtrl">
{{msg}}
</div>
</body>
</html>
var myApp= angular.module('myApp',['ui.bootstrap']);
myApp.factory('myService',function($q,$timeout,$rootScope){
return {
getData: function() {
var deferred = $q.defer();
$timeout(function(){
if (true) {
$rootScope.$broadcast('failure',{a:5,b:3});
console.log("in here");
deferred.reject("rejected");
}
else {
deferred.resolve("success!");
}
},2000);
return deferred.promise;
}
};
});
myApp.factory('alertService',function($rootScope){
$rootScope.alerts = [];
var alertService = {
add:function(type,msg) {
$rootScope.alerts.push({type:type,msg:msg,close:function(){alertService.closeAlert(this)}});
},
closeAlert: function(alert){
alertService.closeAlertAtIndex($rootScope.alerts.indexOf(alert));
},
closeAlertAtIndex: function(index) {
$rootScope.alerts.splice(index,1);
}
}
return alertService;
});
myApp.controller('MainCtrl',function($scope,myService,alertService){
$scope.msg = myService.getData();
$scope.$on('failure',function(event,data){
alertService.add('error','Oh snap! Change a few things up and try submitting again.');
});
});