<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
<style>
.firstModal{
background: red;
}
.secondModal{
background: green;
}
</style>
</head>
<body ng-app="demoApp">
<div ng-controller="DemoCtrl">
<div app-modal="firstModal">
<div class="form-group">
<input type="text" />
<input type="submit" value="Submit" />
</div>
</div>
<div app-modal="secondModal">
<div class="form-group">
<input type="text" />
<input type="submit" value="Submit" />
</div>
</div>
</div>
</body>
</html>
// Code goes here
var demoApp = angular.module('demoApp', []);
demoApp.controller('DemoCtrl', function(){});
demoApp.directive('appModal', function() {
return {
restrict: 'A',
transclude: true,
link: function($scope, elem, attr){
$scope.modalClass = attr.appModal;
},
scope: {},
templateUrl: 'modal.html'
};
});
/* Styles go here */
<!-- Modal -->
<div class="app-modal" ng-class="modalClass">
<h5>{{modalClass}}</h5>
<div ng-transclude></div>
</div>