Simple modal dialog using AngularJS and Kendo UI

Question

I'm new to Angular and I need help creating a resuable service or similar to display a very simple Yes / No dialog.

I use the Kendo UI window component to display a modal dialog, but I find that I duplicate an almost identical code / HTML wherever I need a confirmation dialog:

<div kendo-window="myDialogWindow" k-modal="true" k-visible="false" k-width="250"> <div style="text-align: center; width:100%"> <div style="margin:10px 0 15px 0">{{ dialog.message }}</div> <button class="k-button k-primary" id="yesButton" ng-click="onYes()">Yes</button> <button class="k-button" id="noButton" ng-click="onNo()">No</button> </div> </div> 

Then from any click event or the like, I call the method to open and center the dialog:

 $scope.showDialog = function(title, message) { $scope.dialog.message = message; $scope.myDialogWindow.title(title); $scope.myDialogWindow.center(); $scope.myDialogWindow.open(); } 

I would like to minimize code duplication and create something reusable for it.

At first I realized that the user directive would work well, but then I would need to create a two-way related variable in the selection area and put a clock on it to know when to open the dialog + create a couple of binding methods when the user clicks the button. I will also need to put the directive in the HTML.

I was looking for a solution, but the material I found was too tedious for my modest needs (and I also wanted to use the Kendo UI for a consistent theme).

From what I found, it seems that Angular service might be a better approach (entering a dialog box in the DOM), with a promise to tell me what was clicked. The service should be very easy to use - something like this:

 dialogService.display("Some title", "The message").then( function() { // Yes clicked... }, function() { // No clicked... }); 

Here is a simple plunker that simply opens the kendo dialog when a button is clicked: http://plnkr.co/edit/ywCc3ZqFAXl3JEAu9XHW?p=preview

Recall: how to create a service that displays a Yes / No dialog with a promise to tell me what was clicked? If possible, please update the plunker to demonstrate the solution.

Of course, I am open to suggestions if there is a better approach.

Answer 1

I came up with a solution below if it helps someone.

dialogService.js:

 (function () { 'use strict'; var serviceId = 'dialogService'; angular.module('app').factory(serviceId, ['$q', dialogService]); function dialogService($q) { var service = { showDialog: showDialog }; return service; function showDialog(title, message) { var deferred = $q.defer(); var html = '<div id="myDialogWindow"> ' + ' <div style="text-align: center; width:100%"> ' + ' <div style="margin:10px 0 15px 0">' + message + '</div> ' + ' <button class="k-button k-primary" id="yesButton">Yes</button> ' + ' <button class="k-button" id="noButton"">No</button> ' + ' </div> ' + '</div> '; $('body').append(html); var windowDiv = $('#myDialogWindow'); windowDiv.kendoWindow({ width: "250px", title: title, modal: true, visible: false }); var dialog = windowDiv.data("kendoWindow"); $('#yesButton').click(function(e) { dialog.close(); $('#myDialogWindow').remove(); deferred.resolve(); }); $('#noButton').click(function(e) { dialog.close(); $('#myDialogWindow').remove(); deferred.reject(); }); dialog.center(); dialog.open(); return deferred.promise; } } })(); 

HTML:

 <div ng-controller="myController"> <button ng-click="showDialog('Delete Confirmation', 'Delete line?')">Click me!</button> </div> 

showDialog method in the controller:

 $scope.showDialog = function(title, message) { dialogService.showDialog(title, message).then( function() { alert('Yes clicked'); }, function() { alert('No clicked'); }); } 

New plunker: http://plnkr.co/edit/WY0x1n6PwIKqxK0sKr3u?p=preview