How to add a dialog box for reuse in Angular?

Question

I am new to Angular and am trying to implement this solution in my project.

It looks complicated, but I'm trying to make it into a reusable element so that I can call it from anywhere and just pass the contents that will be shown (otherwise, what is the point?).

So, my specific question is: if I already have a controller associated with some DOM element and it has a function that is sent and selects some kind of factory controlled call to $http , and after the answer that I want to notify the user through This dialog is something, how can I combine * this directive and * this controller with my existing one, and how to do it so that I can use it again from a completely different controller ?

Or is this perhaps a bad example for this use, and should I look at another?

Answer 1

Compared to the other options below, given the minimalist approach, use angular factory . See an example snippet below.

Note : using angular JS with Bootstrap UI - AngularUI.

• Reusable modal view - ConfirmationBox.html

 <div class="modal-header"> <h3 class="modal-title">{{title}}</h3> </div> <div class="modal-body"> {{message}} </div> <div class="modal-footer"> <button type="button" class="btn btn-primary btn-warn" data-ng-click="ok(); $event.stopPropagation()">OK</button> <button type="button" class="btn btn-default" data-ng-click="cancel(); $event.stopPropagation()">Cancel</button> </div> 

2. Reusable module and general factory for handling reusable dialog box

 angular.module('sharedmodule',['ui.bootstrap', 'ui.bootstrap.tpls']) .factory("sharedService",["$q", "$modal", function ($q, $modal) { var _showConfirmDialog = function (title, message) { var defer = $q.defer(); var modalInstance = $modal.open({ animation: true, size: "sm", templateUrl: 'ConfirmationBox.html', controller: function ($scope, $modalInstance) { $scope.title = title; $scope.message = message; $scope.ok = function () { modalInstance.close(); defer.resolve(); }; $scope.cancel = function () { $modalInstance.dismiss(); defer.reject(); }; } }); return defer.promise; } return { showConfirmDialog: _showConfirmDialog }; }]); 

3. Part of your presentation using a common modal dialog

 <a data-ng-click="showConfirm()">Go Back to previous page</a> 

4. The controller of your presentation, which opens the general exchange dialog and the processing of notifications (Ok and Cancel)

 var myModule = angular.module("mymodule", ['sharedmodule', 'ui.bootstrap', 'ui.bootstrap.tpls']); myModule.controller('myController', ["$scope", "sharedService", "$window", function ($scope, sharedService, $window) { $scope.showConfirm = function () { sharedService.showConfirmDialog( 'Confirm!', 'Any unsaved edit will be discarded. Are you sure to navigate back?') .then(function () { $window.location = '#/'; }, function () { }); }; }]); 

Answer 2

An attempt to use the ngDialog 'library for popup and modal. Very nice library. You can later create a service that internally calls ngDialog functions. Later this service can be entered into your controllers for use. I implemented this in one project.

A function in services can take parameters to initialize the ngDialog modal module.

Hope this helps :)

Answer 3

to make it better, I would suggest you change the code to see something below

Template:

 <div class='ng-modal' ng-show='modalContent != null && modalContent != ""'> <div class='ng-modal-overlay' ng-click='hideModal()'></div> <div class='ng-modal-dialog' ng-style='dialogStyle'> <div class='ng-modal-close' ng-click='hideModal()'>X</div> <div class='ng-modal-dialog-content' ng-transclude></div> <p>{{ modalContent }}</p> </div> </div> 

Directive

 app.directive('modalDialog', function() { return { restrict: 'E', scope: { modalContent: '=' }, replace: true, // Replace with the template below transclude: true, // we want to insert custom content inside the directive link: function(scope, element, attrs) { scope.dialogStyle = {}; if (attrs.width) scope.dialogStyle.width = attrs.width; if (attrs.height) scope.dialogStyle.height = attrs.height; scope.hideModal = function() { scope.modalContent= null; }; }, template: '...' // See below }; }); 

and then use the code as shown below in the template

 <modal-dialog modal-content='modalMsg' width='750px' height='90%'></modal-dialog> 

Once these changes are completed, you can write a function to set the message in the variable "modalMsg" and angular will take care of the rest

Note: The code is basically the same as in the link, the only thing I changed is checking the display of the modal window