Skip to content

Instantly share code, notes, and snippets.

@NishiBangar

NishiBangar/alert-directives.markdown

Created December 8, 2016 07:25
Show Gist options
  • Save NishiBangar/a8d969a667902acd3e9c591e89e4b3e7 to your computer and use it in GitHub Desktop.
Save NishiBangar/a8d969a667902acd3e9c591e89e4b3e7 to your computer and use it in GitHub Desktop.
Download ZIP
Alert Directives
Raw
alert-directives.markdown
Raw
index.html
<head>
<script>
</script>
</head>
<body ng-app="myApp" ng-controller="myAppController">
<br>
<div class="row">
<div class="col-sm-2 col-sm-offset-3">
<button class="btn btn-info " ng-click="triggerSimpleAlert()"> Simple Alert</button>
</div>
<div class="col-sm-2 ">
<button class="btn btn-success " ng-click="triggerAlertWithPrompt()">Alert With Prompt </button>
</div>
<div class="col-sm-2 ">
<button class="btn btn-danger " ng-click="triggerModal()">Modal Alert</button>
</div>
</div>
<!--Simple Alert Directive -->
<simple-alert class="simple-alert-position" visible="simpleAlertVisibility" title="Simple Alert">
{{simpleAlertMessage}}
</simple-alert>
<!--Simple Alert Directive -->
<!--Alert With Prompt Directive -->
<alert-with-prompt class="alert-with-prompt-position" visible="alertWithPromptVisibility" title=" Alert With Prompt" on-confirm="confirmAlertWithPrompt(message)">
{{alertWithPromptMessage}}
</alert-with-prompt>
<!-- Alert With Prompt Directive -->
<!--Modal Prompt Directive -->
<modal-prompt visible="modalPromptVisibility" title="Modal With Prompt" on-confirm="confirmModalWithPrompt(message)">
{{modalPromptMessage}}
</modal-prompt>
<!--Modal Prompt Directive -->
</body>
Raw
script.js
var myApp = angular.module('myApp', []);
//----------Alert Directive--------------------------
myApp.directive('simpleAlert', function($timeout) {
return {
template: "<div class='container-fluid col-sm-5 col-sm-offset-3 alert alert-success fade in' role='alert'>" +
"<div class='row'>" +
"<div class='col-sm-12 text-center' style='color:Green;font-weight:bold;font-size:x-large'>Alert..!" +
"</div>" +
"</div>" +
"<div class='row' style='color:black;'>" +
"<div class='col-sm-10 col-sm-offset-1'>" +
"<label class='control-label' ng-transclude></label>" +
"</div>" +
"</div>" +
"</div>",
restrict: 'E',
transclude: true,
replace: true,
scope: {
visible: '=',
title: "@",
onConfirm: "&"
},
controller: ['$scope', function($scope) {
// console.log("Visble : "+$scope.visible);
// console.log("Title : "+$scope.title);
this.title = $scope.title;
$scope.confirmAlert = function() {
// console.log("Template Confirm Alert()-----");
$scope.onConfirm({
message: "success"
});
};
}],
link: function(scope, ele, attr, ctrl) {
// console.log("Link Visble : "+scope.visible);
// console.log(" Link Title : "+scope.title);
// console.log(" Ctrl Title : "+ctrl.title);
/* $timeout(function(){
scope.onConfirm({message:"success"});
},5000); */
scope.$watch(function(scope) {
return scope.visible;
}, function(value) {
// console.log("----visible\(Simple Alert\) watch --- : "+value);
if (value == false) {
$(ele).hide(); //jQuery
} else if (value == true) {
$(ele).show(); //jQuery
}
});
}
}
});
//----------Alert With Prompt Directive--------------------------
myApp.directive('alertWithPrompt', function($timeout) {
return {
template: "<div class='container-fluid col-sm-5 col-sm-offset-3 alert alert-success fade in' role='alert'>" +
"<div class='row'>" +
"<div class='col-sm-12 text-center' style='color:Green;font-weight:bold;font-size:x-large'>Alert..!" +
"</div>" +
"</div>" +
"<div class='row' style='color:black;'>" +
"<div class='col-sm-10 col-sm-offset-1'>" +
"<label class='control-label' ng-transclude></label>" +
"</div>" +
"</div>" +
"<div class='row' >" +
"<div class='col-sm-1 col-sm-offset-7'>" +
"<button class='btn btn-success btn-xs' ng-click='confirmAlert()'>Confirm</button>" +
"</div><div class='col-sm-1'></div>" +
"<div class='col-sm-1 ' style='margin-left:5px;'>" +
"<button class='btn btn-danger btn-xs' ng-click='cancelAlert()'>Cancel</button>" +
"</div>" +
"</div>" +
"</div>",
restrict: 'E',
transclude: true,
replace: true,
scope: {
visible: '=',
title: "@",
onConfirm: "&"
},
controller: ['$scope', function($scope) {
// console.log("Visble : "+$scope.visible);
// console.log("Title : "+$scope.title);
this.title = $scope.title;
$scope.confirmAlert = function() {
console.log("Template Confirm Alert()-----");
$scope.onConfirm({
message: "success"
});
$scope.visible = false;
};
$scope.cancelAlert = function() {
console.log("Scope.element" + $scope.element);
$scope.visible = false;
};
}],
link: function(scope, ele, attr, ctrl) {
scope.element = ele;
// console.log("Link Visble : "+scope.visible);
// console.log(" Link Title : "+scope.title);
// console.log(" Ctrl Title : "+ctrl.title);
/* $timeout(function(){
scope.onConfirm({message:"success"});
},5000); */
scope.$watch(function(scope) {
return scope.visible;
}, function(value) {
// console.log("----visible\(Simple Alert\) watch --- : "+value);
if (value == false) {
$(ele).hide(); //jQuery
} else if (value == true) {
$(ele).show(); //jQuery
} else {
$(ele).hide(); //jQuery
}
});
}
}
});
// ---------Modal Prompt directive--------------------------
myApp
.directive(
'modalPrompt',
function() {
return {
template: '<div class="modal fade in" data-backdrop=\x22static\x22 data-keyboard=false>' +
'<div class="modal-dialog modal-sm">' +
'<div class="modal-content">' +
'<div class="modal-header" style="background-color:black;color:white;">' +
'<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancelModal()"' +
'style="color:white">&times;' +
'</button>' +
'<h4 class="modal-title" style="font-weight: bolder;"> {{title}} </h4>' +
'</div>' +
'<div class="modal-body" >'+
'<p style="font-weight:bold" ng-transclude></p>'
+'</div>' +
'<div class="modal-footer"><button class="btn btn-xs btn-success" ng-click="confirmModal()" style="background-color:#8FBC8F;color:black;font-weight:bold;">' +
'OK</button>' +
/* '<button class="btn btn-xs btn-danger " ng-click="cancelModal()" >' +
'Cancel</button>' + */
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>' +
'</div>',
restrict: 'E',
transclude: true,
replace: true,
scope: {
visible: '=',
title: '@',
onConfirm: '&'
},
controller: ['$scope', function($scope) {
$scope.confirmModal = function() {
console.log("---Template Confirm Modal ()------");
$scope.onConfirm({
message: "Succcess"
});
$scope.visible=false;
};
$scope.cancelModal=function(){
$scope.visible=false;
};
}],
link: function postLink(scope, element, attrs) {
/* scope.$watch(scope.title, function(value) {
// console.log("attrs.title " +value)
scope.title = attrs.title;
}); */
scope.$watch(function(scope) {
return scope.visible;
}, function(value) {
if (value == true)
$(element).modal('show');
else
$(element).modal('hide');
//scope.$digest();
});
$(element).on('shown.bs.modal', function() {
scope.$apply(function() {
scope.$parent[scope.visible] = true;
});
});
$(element).on('hidden.bs.modal', function() {
scope.$apply(function() {
scope.$parent[scope.visible] = false;
});
});
}
};
});
// ------------------------------
//----Controller-----------------
myApp.controller("myAppController", ['$scope', function($scope) {
console.log("---My App Controller ----");
$scope.openModal = false;
//*********Alert Related Vars**********
$scope.simpleAlertVisibility = false;
$scope.alertWithPromptVisibility = false;
$scope.modalPromptVisibility=false;
$scope.simpleAlertMessage = "";
$scope.alertWithPromptMessage = "";
$scope.modalPromptMessage="";
//****************************************
//----Trigger Simple Alert----------
$scope.triggerSimpleAlert = function() {
console.log("---Simplet Alert()-----");
$scope.simpleAlertMessage = "Alert message to be displaced in 'Simple Alert Directive' as part of 'ng-transclude'";
$scope.simpleAlertVisibility = !$scope.simpleAlertVisibility;
// console.log("---simpleAlertVisibility parent---"+$scope.simpleAlertVisibility);
};
//----Trigger Alert With Prompt------
$scope.triggerAlertWithPrompt = function() {
console.log("-----Alert With Prompt()----");
$scope.alertWithPromptVisibility = !$scope.alertWithPromptVisibility;
$scope.alertWithPromptMessage = "Alert message to be displace in 'Alert With Prompt Directive' as part of 'ng-transclude'";
};
//----Trigger Modal------------------
$scope.triggerModal = function() {
console.log("------ Modal ()----");
$scope.modalPromptMessage = "Alert as Modal with prompt buttons";
$scope.modalPromptVisibility = !$scope.modalPromptVisibility;
};
//-----Confirm Alert---------
$scope.confirmSimpleAlert = function(message) {
console.log("---Inside Confirm Simple Alert : " + message);
};
//-----Confirm Alert With Prompt---------
$scope.confirmAlertWithPrompt = function(message) {
console.log("---Inside Confirm Alert With Prompt : " + message);
};
//-----Confirm Modal With Prompt---------
$scope.confirmModalWithPrompt = function(message) {
console.log("---Inside Confirm Modal With Prompt : " + message);
};
}]);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
Raw
style.css
/* .simple-alert-position{
position:fixed;
top:0;
left:0;
z-index:9999;
background: rgba(76, 175, 80, 0.3);
} */
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment