If anyone is still interested, here is a example I recently worked on with bootstrap modal and angularjs directive.
HTML:
<modal visible="showModal1" on-sown="modalOneShown()" on-hide="modalOneHide()">
<modal-header title="Modal Titel 1"></modal-header>
<modal-body>
<h3>This is modal body</h3>
</modal-body>
<modal-footer>
<button class="btn btn-primary" ng-click="hide(1)">Save</button>
</modal-footer>
</modal>
JavaScript:
var myModalApp = angular.module('myModalApp',[]);
myModalApp.directive('modal', function(){
return {
template: '<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"><div class="modal-dialog modal-sm"><div class="modal-content" ng-transclude><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title" id="myModalLabel">Modal title</h4></div></div></div></div>',
restrict: 'E',
transclude: true,
replace:true,
scope:{visible:'=', onSown:'&', onHide:'&'},
link:function postLink(scope, element, attrs){
$(element).modal({
show: false,
keyboard: attrs.keyboard,
backdrop: attrs.backdrop
});
scope.$watch(function(){return scope.visible;}, function(value){
if(value == true){
$(element).modal('show');
}else{
$(element).modal('hide');
}
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = true;
});
});
$(element).on('shown.bs.modal', function(){
scope.$apply(function(){
scope.onSown({});
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.$parent[attrs.visible] = false;
});
});
$(element).on('hidden.bs.modal', function(){
scope.$apply(function(){
scope.onHide({});
});
});
}
};
}
);
myModalApp.directive('modalHeader', function(){
return {
template:'<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button><h4 class="modal-title">{{title}}</h4></div>',
replace:true,
restrict: 'E',
scope: {title:'@'}
};
});
myModalApp.directive('modalBody', function(){
return {
template:'<div class="modal-body" ng-transclude></div>',
replace:true,
restrict: 'E',
transclude: true
};
});
myModalApp.directive('modalFooter', function(){
return {
template:'<div class="modal-footer" ng-transclude></div>',
replace:true,
restrict: 'E',
transclude: true
};
});
function ModalController($scope){
$scope.title = "Angularjs Bootstrap Modal Directive Example";
$scope.showModal1 = false;
$scope.showModal2 = false;
$scope.hide = function(m){
if(m === 1){
$scope.showModal1 = false;
}else{
$scope.showModal2 = false;
}
}
$scope.modalOneShown = function(){
console.log('model one shown');
}
$scope.modalOneHide = function(){
console.log('model one hidden');
}
}