Angular Toast, alert [Dynamic]

popup (alert and toast) angular dynamic

by rahulsemwal1991

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<div id="body">
  <div ng-controller="FrameController as vm">
    {{vm.message}}
    <button ng-click="vm.openAlert()">Alert</button>
    <button ng-click="vm.openWarn()">Warning</buttron>
    <button ng-click="vm.openToast()">Toast</button>
  </div>
</div>
<script type="text/ng-template" id="alert">
    
	<div class="popup">
    <div class="popup-dialog dialog">
        <h4 id = "head" class="alert-heading">Alert!</h4>
        <p id="msg"></p>
        <div class="mb-0">
            <div class="text-center">
                <button id="confirm" type="button" class="btn btn-outline-success" style="width:60px;">Ok</button>
               
            </div>
        </div>
        <style>
            .popup{
                background-color: rgba(0, 0, 0, 0.56);
                /*background-color: rgba(115, 79, 177, 0.34);*/
                width:100%;
                position:fixed;
                top:0;
                right:0;
                bottom:0;
                left:0;
                z-index:1050;
                overflow: hidden;
                outline: 0;
            }
            .popup-dialog{
                z-index:1051;
                transition-duration: .3s;
                /*border-radius: initial;*/
            }
            .popup-dialog {
                position: relative;
                width: auto;
                margin: 100px 10px;
                /*margin-top:-200px;*/
            }
            @media (min-width: 576px){
                .popup-dialog {
                    max-width: 400px;
                    margin: 100px auto;
                }
            }
        </style>
    </div>
</div>
</script>
<script type="text/html" id="toast">
	<div class="toast">
    <div class="dialog card">
        <h4 id="head" class="alert-heading"></h4>
        <p id="msg"></p>
        <div class="mb-0">
            <div class="text-center">
             ...

CSS

.dialog{
      text-align: center;
      padding: 3px 10px;
      background-color:white;
}

JavaScript

setTimeout(function() {
  angular.bootstrap(document.getElementById('body'), ['app']);
});

angular.module('app', [])

.controller('FrameController', ['$injector','popup', function($injector,popup) {
  var vm = this;
  vm.message = 'app is running';
  vm.openAlert = function(){
  	console.log("alert")
    popup.show('alert',{'msg':'This is alert message','head':'Alert!'},null).then(function (r) { console.log('r', r)});
  }
  vm.openToast = function(){
     console.log("toast")
     popup.show('toast',{'msg':'This is toast','head':'Toast!'},null).then(function (r) { console.log('r', r)});
  }
}])

.service("popup",['$rootScope','$document','$compile','$q','$http',function($rootScope,$document,$compile,$q,$http){
/*@DOCS
** Dynamically adding html alert,warn, toast blocks in DOM and delete it after complition of task*/
    var self = this;
    // var operation = {};
    var nativeRoutines = {};
    var fetchTemp = function(template){
        let method = 'GET';
        let API = template;
        let data = '';
        let headers = 'text/html';
        let wantLoading = true;

        var success = function(res){
            return res;
        }
        var failure = function(err){
            return err;
        }
        // return hitAPI.query(method, API, data, headers,wantLoading).then(success,failure);
        var req = {
            method: method,
            url: API,
            headers: headers,
            data: data
        }
        var defered = $q.defer();
        $rootScope.ajaxLoding = true;
        $http(req).success(function (response,status,headers) {
            defered.resolve(response);
            $rootScope.ajaxLoding = false;
        }).error(function (err,status) {
            defered.resolve(temp);//it will resolved, should handled inside controller.
            $rootScope.ajaxLoding = false;
        });
        return defered.promise;
    }
    nativeRoutines.warn = function(element){
        var defered = $q.defer();
       ...