<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.0.8" data-semver="1.0.8" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="demoApp">
<div class="container">
<div class="row">
<div class="col-md-6">
<div ng-controller="AlertsController">
<alert ng-repeat="alert in alerts" message="{{alert.message}}" type="{{alert.type}}" close="close($index)"></alert>
</div>
</div>
</div>
</div>
</body>
</html>
// Code goes here
var app = angular.module("demoApp", []);
app.controller("AlertsController", function($scope){
var message = "<strong>Well done!</strong> You successfully read this important alert message.";
var infomessage = "<strong>Heads up!</strong> This alert needs your attention, but it's not super important.";
var warningmessage = "<strong>Warning!</strong> Best check yo self, you're not looking too good."
var dangermessage = "<strong>Oh snap!</strong> Change a few things up and try submitting again.";
$scope.alerts = [{
message: message,
type: "success"
},{
message: infomessage,
type: "info"
},{
message: warningmessage,
type: "warning"
},{
message: dangermessage,
type: "danger"
}];
$scope.close = function(index){
console.log(index, $scope.alerts);
$scope.alerts.splice(index, 1);
}
});
app.directive("alert", function(){
return{
restrict: 'EA',
templateUrl: "alert.html",
replace: true,
scope:{
message: "@",
type: "@",
close: "&"
},
link: function(){
}
};
});
/* Styles go here */
<div class="alert" ng-class='type && "alert-" + type'>
<button type="button" class="close" data-dismiss="alert" aria-hidden="true" ng-click="close()">×</button>
<div ng-bind-html-unsafe="message"></div>
</div>