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

对话框服务：

( 需要调用amazeui的modal样式 )

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;
    }); 

    //显示对话框
    $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(‘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-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
 * @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 = $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();
    }
}

版权声明：本文为博主原创文章，未经博主允许不得转载。