Angular service plug-in 1 -- Dialog Box & amp; prompt box, angular service plug-in

Angular service plug-in 1 -- Dialog Box & prompt box, angular service plug-in
Dialog Box Service:

(The modal style of amazeui needs to be called)

Const angular = require ("angular"); const jqLite = angular. element;/*** @ ngdoc service * @ name commonModal * @ module common. modal. service * @ usage commonModal. fromTemplateUrl ('. /modal.html ', {scope: $ scope ,}). then (function (modal) {$ scope. modal = modal;}); // displayed dialog box $ scope. showModal = function () {modal. show () ;}; // close the dialog box $ scope. closeModal = function () {modal. hide ();} */const angular = require ('angular '); const jqLite = angular. element;/*** @ ngdoc service * @ name commonModal * @ module common. modal. service **/module. exports = angular. module ('csm. common. services '). factory ('commonmodal', commonModal);/* @ ngInject */function commonModal ($ q, $ document, $ compile, $ rootScope) {return {fromTemplateUrl: fromTemplateUrl ,}; /*** @ ngdoc method * @ param url * @ param options * @ name fromTemplateUrl * @ desc add a modal in document return a promise object */function fromTemplateUrl (url, options) {const defer = $ q. defer (); createModal (url, options, defer); return defer. promise;}/*** @ ngdoc method * @ param url * @ param options * @ param defer */function createModal (url, options, defer) {// Create a new scope for the modal const scope = options. scope & options. scope. $ new () | $ rootScope. $ new (true); const element = $ compile (url) (scope); const modal = new Modal (element, scope, $ document); defer. resolve (modal) ;}}/*** @ ngdoc constructor * @ param element * @ param scope * @ param parent **/function Modal (element, scope, parent) {this. element = element; this. scope = scope; this. parent = parent; this. _ init ();} Modal. prototype = {_ init: _ init, show: show, hide: hide,}; function _ init () {const self = this; self. parent [0]. body. appendChild (self. element [0]);} function show () {const self = this; const element = self. element; const openModal = jqLite (element. children () [0]); element.css ('display', 'block'); element. addClass ('am-active'); openModal.css ('display', 'block'); openModal.css ('margin-top', '-100px'); setTimeout (function () {openModal. removeClass ('am-modal-out '). addClass ('am-modal-activity') ;}, 100) ;}function hide () {const self = this; const element = self. element; const openModal = jqLite (element. children () [0]); openModal. removeClass ('am-modal-active '). addClass ('am-modal-out'); setTimeout (function () {openModal.css ('display', 'None'); element.css ('display', 'None '); element. removeClass ('am-active') ;}, 200 );}

Prompt Box Service:

The prompt box encapsulates the dialog box, including the success, info, warning, danger, and confirm dialog boxes:

Const angular = require ('angular '); const url = require ('. /modal.html ');/*** @ ngdoc service * @ name commonModal * @ module common. modal. service * @ usage try {//...........} catch (err) {AlertService. warning (err. data);} */module. exports = angular. module ('csm. common. services '). factory ('alertservice', AlertService);/* @ ngInject */function AlertService ($ rootScope, commonModal) {const scope = $ roo TScope. $ new (true); let modal; initModal (); return {success: success, info: info, warning: warning, danger: danger, confirm: confirm ,}; function initModal () {commonModal. fromTemplateUrl (url, {scope: scope }). then (function (md) {scope. modal = md;});} function success (content) {scope. texts = {title: 'success', body: content, closeButton: 'confirmed', noDismiss: true,}; modal. show ();} function in Fo (content) {scope. texts = {title: 'hprompt ', body: content, closeButton: 'true', noDismiss: true,}; modal. show ();} function warning (content, callback = angular. noop) {scope. texts = {title: 'Warning ', body: content, closeButton: 'confirmed', dismissButton: 'close', noDismiss: true,}; modal. callback = function () {modal. hide (); callback () ;}; modal. show ();} function danger (content, callback) {scope. texts = {t Itle: 'hazardous ', body: content, closeButton:' I understand ', dismissButton: 'cancel', noDismiss: false,}; modal. callback = function () {modal. hide (); callback () ;}; modal. show ();} function confirm (content, callback) {scope. texts = {title: 'Are you sure you want? ', Body: content, closeButton:' I ', dismissButton:' Think About It ', noDismiss: false,}; modal. callback = function () {modal. hide (); callback () ;}; modal. show ();}}

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.