JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://code.angularjs.org/angular-1.0.0rc7.js"></script>
<div ng-app="dialog-demo">
<script type="text/ng-template" id="dialog.html">
<div ng-switch on="show()">
<div class="modal" ng:switch-when="true">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>{{header}}</h3>
</div>
<div class="modal-body" ng-transclude></div>
<div class="modal-footer">
<a href="#" class="btn btn-primary" ng-click="primary()">Save changes</a>
<a href="#" class="btn" ng-click="close()">Close</a>
</div>
</div>
</div>
</script>
<h1> Dialog </h1>
<div ng-controller="DialogCtrl">
<input type="checkbox" ng-model="showDialog">
<input ng-model="title"><br/>
<textarea ng-model="body"></textarea><br/>
<dialog header="{{title}}"
show="showDialog"
close="showDialog=false"
primary="showDialog=false; title=title+'!'">
<div ng-bind-html="body"></div>
</dialog>
</div>
<div>
JavaScript
angular.module('dialog-demo', [])
.directive('dialog', function() {
return {
restrict: 'E',
scope: {
header: 'bind',
show: 'accessor',
close: 'expression',
primary: 'expression'
},
template: '<div ng-switch on="show()">' +
'<div class="modal" ng:switch-when="true"> '+
'<div class="modal-header"> '+
' <a class="close" data-dismiss="modal">×</a> '+
'<h3>{{header}}</h3> '+
'</div> '+
'<div class="modal-body" ng-transclude></div> '+
'<div class="modal-footer"> '+
' <a href="#" class="btn btn-primary" ng-click="primary()">Save changes</a> '+
' <a href="#" class="btn" ng-click="close()">Close</a> '+
'</div> '+
'</div> '+
'</div>',
transclude: true
};
});
function DialogCtrl($scope) {
$scope.title = 'Modal header';
$scope.body = "<p>One fine body…</p>"
}