Saturday, 25 June 2016

AngularJS Dialogs - Confirm Dialogs

Building on my previous post about creating alert dialogs with AngularJS, here we will look at creating confirmation dialogs we can use to get confirmation from the user before completing a destructive action such as deleting something.

 In the directive we add a new scope variable 'confirmPositive' with the '&' binding to allow our controller to assign a function to it. When the OK button is pressed, this function will be called. In the template we add another button - the cancel button will retain the alert behaviour and just hide the dialog whereas the OK button will call a function which hides the dialog and then calls the confirmPositive function.
.directive('myConfirm', function () {
function link($scope) {
$scope.visible = false;
$scope.posClick = function() {
$scope.visible = false;
$scope.confirmPositive();
};
}
return {
template: '<div class="mydialog-bg" ng-show="visible"><div class="mydialog-pop"><div class="mydialog-title">{{confirmTitle}}</div><div>{{confirmContent}}</div><input type="button" ng-click="posClick()" value="OK" /><input type="button" ng-click="visible=false" value="Cancel" /></div></div>',
link: link,
scope: {
confirmTitle: '@',
confirmContent: '@',
confirmPositive: '&',
visible: '='
}
};
})
view raw NGConfirmDirective.js hosted with ❤ by GitHub

In the controller we just need to add the function which will carry out our destructive action when the user clicks OK.
.controller('myCtl', function ($scope) {
$scope.showConfirm = function() {
$scope.confirmMessage = 'Are you sure you want to?';
$scope.confirmVisible = true;
};
$scope.doThing = function() {
console.log('do something that requires confirmation');
};
})
view raw NGConfirmCtl.js hosted with ❤ by GitHub

In our HTML we just need to add an attribute so that the function in our controller is passed to our directive.
<body ng-controller="myCtl">
<input type="button" ng-click="showConfirm()" value="Show" />
<div my-confirm visible="confirmVisible" confirm-content="{{confirmMessage}}" confirm-title="Confirm Dialog Demo" confirm-positive="doThing()"></div>
</body>
view raw NGConfirmHTML.html hosted with ❤ by GitHub

A complete example can be found here.
Posted by at No comments:
Labels:

AngularJS Dialogs - Alert Dialogs

Moving from working with just jQuery to AngularJS can take some getting used to. Separating the front end from the logic of the controller throws up some interesting problems such as displaying alert and confirmation dialogs.

Here's one way to trigger a custom alert dialog from a controller.

 To achieve this we create an AngularJS directive which, when activated, will cover the screen with a full-screen translucent element with a child element which will be our pop-up dialog.
.directive('myAlert', function () {
return {
template: '<div class="mydialog-bg" ng-show="visible"><div class="mydialog-pop"><div class="mydialog-title">{{alertTitle}}</div><div>{{alertContent}}</div><input type="button" ng-click="visible=false" value="OK" /></div></div>',
link: function(scope) { scope.visible = false;},
scope: {
alertTitle: '@',
alertContent: '@',
visible: '='
}
};
})
view raw NGAlertDirective.js hosted with ❤ by GitHub

We have a simple template with the full-screen background and a dialog with title, content and an OK button. When the button is clicked, visible is set to false. A link function initialises the visible variable to false and we set up some variables so that the title and content can be set and a variable mapped to the visible variable.

 In our controller we can create a function to show our alert. In this example, when a button is clicked, we will set our alert message and show the alert:
.controller('myCtl', function ($scope) {
$scope.showAlert = function() {
$scope.alertMessage = 'This is my alert message!';
$scope.alertVisible = true;
}
})
view raw NGAlertCtl.js hosted with ❤ by GitHub

The HTML including our alert directive looks like this:
<body ng-controller="myCtl">
<input type="button" ng-click="showAlert()" value="Show" />
<div my-alert visible="alertVisible" alert-content="{{alertMessage}}" alert-title="Alert Dialog Demo"></div>
</body>
view raw NGAlert.html hosted with ❤ by GitHub

A complete example can be found here.
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)