Easy Modal Simple

Easy alert, confirm and modal

by regis L

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<body ng-app = "easyModalApp" class="container">
<div ng-controller="easyAlertController">
    <p><h3>Easy Alert Examples:</h3>
    <button class="btn btn-info" ng-click="showModal1()" type="button">Simple Alert</button>
    <button class="btn btn-info" ng-click="showModal2()" type="button">New Button Label</button>
    <button class="btn btn-info" ng-click="showModal3()" type="button">Set Fade Time</button>
    <button class="btn btn-info" ng-click="showModal4()" type="button">New Button label and Set Fade Time</button>
</div>
<p></p>
<div ng-controller="easyConfirmController">
    <p><h3>Easy Confirm Examples:</h3>
    <button class="btn btn-success" ng-click="showModal1()" type="button">Simple Confirm</button>
    <button class="btn btn-success" ng-click="showModal2()" type="button">New Button Labels</button>
    <h4 class="bg-info text-primary">{{data}}</h4>
</div>
<p></p>
<div ng-controller="easyModalController">
    <p><h3>Easy Modal Examples:</h3>
    <button class="btn btn-default" ng-click="showModal1()" type="button">Simple String Template</button>
   <!-- <button class="btn btn-default" ng-click="showModal2()" type="button">External Template</button> -->
    <button class="btn btn-default" ng-click="showModal3()" type="button">Callback Function</button>
    <button class="btn btn-default" ng-click="showModal4()" type="button">Extern Controller</button>
    <h4 class="bg-info text-primary">{{data}}</h4>
</div>
</body>

JavaScript

var easyModalApp = angular.module("easyModalApp", ['easyModalService']);

    easyModalApp.controller("easyAlertController",['$scope','emodal',function ($scope, emodal) {
        $scope.showModal1 = function(){emodal.alert("Messages go here!");};
        $scope.showModal2 = function(){emodal.alert("Messages go here!","New Button Label");};
        $scope.showModal3 = function(){emodal.alert("<strong>Title</strong> <p></p>Disappear in 2 seconds",2000);};
        $scope.showModal4 = function(){emodal.alert("<strong>Title</strong><p></p>Disappear in 2 seconds","New Button Label",2000);};
    }]);

    easyModalApp.controller("easyConfirmController",['$scope','emodal', function ($scope, emodal) {
        $scope.showModal1 = function(){
           emodal.confirm("Are you sure to delete?<p></p>It is not recoverable!",
               function(){
                   $scope.data='You have pressed OK!';
               },
               function(){
                   $scope.data='You have pressed Cancel!';
               }
           );
        };
        $scope.showModal2 = function(){
            emodal.confirm("Are you sure to delete?<p></p>It is not recoverable!",
                "New OK Label","New Cancel Label",
                function(){console.log('deleted.')},
                function(){console.log('canceled.')});
        };
    }]);

    easyModalApp.controller("easyModalController",['$scope','emodal',function ($scope, emodal) {
        var successCallbackFun = function (arg) {
            $scope.data = '[success callback] Parameter: '+arg.id;
        };
        var cancelCallbackFun = function (arg) {
            $scope.data = '[cancel callback] Parameter: '+arg.info;
        };
        $scope.showModal1 = function(){
            emodal.modal({template:'Messages go here!',title:'',cancel:{label:'Cancel',show:true}});
        };
        $scope.showModal2 = function(){
            emodal.modal("../partials/externalTemplate.html",{title:'External Template'});
      ...