Angularjs Dialog Box Example - Jquery
How to create a confirm dialog in angularjs?
Snippet Code
Rate this page :
|
[ 0 votes]
|
Dialog box is used to display a predefined text when user clicks on button or executes a function. The sample code to create an dialog box using angularjs is given below.
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js" data-semver="1.0.7"></script>
<script src="hello.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>Hello {{name}}!</p>
<button ng-click="sayHi()" ng-confirm-click="Would you like to say hi?">Say hi to {{ name }}</button>
</body>
</html>
hello.js:
---------
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
$scope.sayHi = function() {
alert('hi!')
}
});
app.directive('ngConfirmClick', [
function() {
return {
priority: 1,
link: function(scope, element, attr) {
var msg = attr.ngConfirmClick || "Are you sure?";
var clickAction = attr.ngClick;
attr.ngClick = "";
element.bind('click', function(event) {
if (window.confirm(msg)) {
scope.$eval(clickAction)
}
});
}
};
}
])
