1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > angular服务插件1——对话框提示框

angular服务插件1——对话框提示框

时间:2020-12-07 11:51:56

相关推荐

angular服务插件1——对话框提示框

对话框服务:

( 需要调用amazeui的modal样式 )

const angular = require("angular");const jqLite = angular.element;/*** @ngdoc service* @name commonModal* @module common.modal.service* @usagecommonModal.fromTemplateUrl('./modal.html',{scope: $scope,}).then(function(modal) {$scope.modal = modal;}); //显示对话框$scope.showModal = function() {modal.show();};//关闭对话框$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('mon.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 modalconst 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-active');}, 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);}

提示框服务:

提示框是对对话框的封装,包括success,info,warning,danger,confirm对话框:

const angular = require('angular');const url = require('./modal.html');/*** @ngdoc service* @name commonModal* @module common.modal.service* @usagetry{// ...........}catch(err) {AlertService.warning(err.data);}*/ module.exports = angular.module('mon.services').factory('AlertService', AlertService);/* @ngInject */function AlertService($rootScope, commonModal) {const scope = $rootScope.$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 = modal = md;});}function success(content) {scope.texts = {title: '成功',body: content,closeButton: '确定',noDismiss: true,};modal.show();}function info(content) {scope.texts = {title: '提示',body: content,closeButton: '确定',noDismiss: true,};modal.show();}function warning(content, callback = angular.noop) {scope.texts = {title: '警告',body: content,closeButton: '确认',dismissButton: '关闭',noDismiss: true,};modal.callback = function () {modal.hide();callback();};modal.show();}function danger(content, callback) {scope.texts = {title: '危险',body: content,closeButton: '我了解',dismissButton: '取消',noDismiss: false,};modal.callback = function () {modal.hide();callback();};modal.show();}function confirm(content, callback) {scope.texts = {title: '你确定吗?',body: content,closeButton: '我确定',dismissButton: '再想想',noDismiss: false,};modal.callback = function () {modal.hide();callback();};modal.show();}}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。