Angular: Modal Directive

by Alesei Narkevitch

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <ma-modal data-config="config1"></ma-modal>
    <ma-modal data-config="config2"></ma-modal>
    <ma-modal data-config="config3"></ma-modal>
</div>

JavaScript

var myApp = angular.module('myApp',['myDirectives']);


function MyCtrl($scope) {
    $scope.config1 = {
                modelId   : 'modal-one',
                scopeBind : 'modalOne'
            };
    $scope.config2 = {
                modelId   : 'modal-two',
                scopeBind : 'modalTwo'
            };
    $scope.config3 = {
                modelId   : 'modal-two',
                scopeBind : 'modalTwo'
            };
    
    $scope.modalOne = false;
    $scope.modalTwo = false;
    $scope.modalThre = true;
}

angular.module('myDirectives', [])
.directive('maModal',['$compile',function ($compile) {
    return {
        restrict: 'E',
        controller: ['$scope','$attrs',function($scope,$attrs) {
            var opt = {
                modelId   : undefined,
                scopeBind : undefined
            };

            angular.extend(opt, $scope.$eval($attrs.config));
            
            return opt;

        }],
        link: function(scope, iElement, iAttrs, controller) {
           $compile(iElement.replaceWith('<div class="modal" ng-show="' + controller.scopeBind + '" id="' + controller.modelId + '"> id: ' + controller.modelId + ' / shown: ' + scope[controller.scopeBind] + '</div>'))(scope);
        }
    };
}]);