Angularjs Bootstrap Modal Directive Example

by hasan2002

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<div ng-app="myModalApp">
    <div ng-controller="ModalController">
        <h3>{{title}}</h3>
        <button class="btn btn-primary" ng-click="showModal1 = true">Show Modal</button>
        <button class="btn btn-primary" ng-click="showModal2 = true">Show Static Modal</button>
        <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>
        
        <modal visible="showModal2" backdrop="static">
            <modal-header title="Modal Titel 2"></modal-header>
            <modal-body>
                <h3>This is modal body</h3>
            </modal-body>
            <modal-footer>
                <button class="btn btn-primary" ng-click="hide(2)">Save</button>
            </modal-footer>
        </modal>
     </div>
</div>

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">&times;</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',...