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>
    <button ng-click="toggle('modalOne')">toggle 1</button>
    <button ng-click="toggle('modalTwo')">toggle 2</button>
    <button ng-click="toggle('modalThree')">toggle 3</button>
</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-three',
                scopeBind : 'modalThree'
            };
    
    $scope.toggle = function(name){
        //alert(name);
        if ($scope[name]) { $scope[name] = false; } else { $scope[name] = 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));
            
            
            $scope[opt.scopeBind] = false;
            
            return opt;

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