Question

我有一个通用的modelService来打开对话框并处理从对话框中提出的任何点击事件。

重现问题的步骤：

打开登录面板作为第一个对话框
然后从登录面板打开忘记密码dialgue框
现在关闭忘记密码对话框，这很好用！
现在尝试关闭第一个弹出窗口（登录对话框），没有任何反应！即使相关事件关闭被触发。在那里没有错误提出：（

任何暗示我在这里失踪的建议都会很棒。

源代码：

modelService：

/**
 * This is replicating some of the confirm functionality, which isn't ideal.
 * @todo refactor confirm service to use this.
 */

myApp.factory('modalService', function ($compile, $templateCache, $http, $location, $store, safeApply, $timeout) {

    var modalService = {
        popup: {},
        templates: [],
        linkers: []
    };

    /**
     * Everything ready - show the modal
     */
    modalService.showModal = function (template, scope) {

        /**
         * Need to store linker
         * @see https://github.com/angular/angular.js/issues/1700
         */
        if (!this.linkers[template]) {
            this.linkers[template] = $compile(this.templates[template], scope);
        }
        this.popup = this.linkers[template](scope);

        $('body').append(this.popup)
            .show();

        if (this.popup.find('.lnk-cancel, .back-link')) {
            this.popup.find('.lnk-cancel, .back-link').on('click', function (e) {
                if (modalService.options.cancel) {
                    modalService.options.cancel();
                }
                modalService.closePopup();
                //e.preventDefault();
            });
        }
    };

    /**
     * Close the modal
     */
    modalService.closePopup = function () {
        if (this.popup.remove) {
            this.popup.remove();
        }
    };

    /**
     * Create the actual content of the modal
     *
     * @param msg
     * @param templateUrl
     * @param scope
     */
    modalService.createModal = function (template, scope) {

        var self = this;

        scope.frameSrc = this.options.frameSrc;
        scope.title = this.options.title;
        scope.returnLink = this.options.returnLink || $store.get('locationstore.returnTo') || $location.path();
        scope.modalService = modalService;

        /*
         * Get the template an compile it
         */
        //if ( !this.templates[template] ) {
        var templatePromise = $http.get(template, { cache: $templateCache })
            .then(function (response) {
                self.templates[template] = response.data;
                self.showModal(template, scope);
            });
    };
    /*
     * Public methods
     */
    return {

        /**
         * Show a modal confirm
         *
         * @param msg
         * @param scope
         * @param options
         */
        show: function (popupName, template, scope, options) {

            safeApply(scope, function () {
                scope.name = popupName;
                modalService.options = options;
                modalService.createModal(template, scope);
            });
        },

        close: function (scope) {
            safeApply(scope, function () {
                modalService.closePopup();
            });
        }
    };

});

登录面板：

<div class="modal-table">
  <div class="modal-table-cell">
    <div class="underlay  close-modals"></div>

    <div class="modal modal--medium login"  ng-controller="loginController">
        <div class="scroll-panel">
            <h1 class="modal__title">Login</h1>            
            <a class="back-link" href ng-click="returnTo(cancelLink)">Close</a>
        <div class="primary">
            <form name="loginForm" ng-submit="login()" >

                <ul>
                    <li>
                        <span class="error help-inline" ng-show="submitted && loginForm.email.$error.required">Please enter your email</span>
                        <input class="login__input" type="text" name="email" placeholder="email" ng-model="email" id="login-email">
                    </li>
                    <li>
                        <span class="error help-inline" ng-show="submitted && loginForm.password.$error.required">Please enter your password</span>
                        <input class="login__input" type="password" name="password" placeholder="password" id="login-password" ng-model="password" >
                    </li>
                </ul>
                <div style="">
                <button class="login-button button main-button" style="min-width: 180px; max-width: 180px;padding-right: 50px; padding-left: 50px;" type="submit" id="login-submit">Login
                            <i   class="fa fa-spinner fa-spin" ng-show="showLoginProgress"></i>
                </button>
                </div>
                <a class="forgotten-pw" ng-click="resetPassword()" id="login-reset-password">Forgotten password</a>
            </form>
        </div>
        <div class="secondary">
            <p>New users register now to</p>            
            <a class="action" ng-click="register()" id="login-register">Register</a>
        </div>
    </div>
</div>

</div>
</div>

弹出式代码片段：

//Login Popup Show
   modalService.show('login-Popup', 'js/partials/loginPanel.html', $rootScope, {});

//Forgot Password Popup show 
    $scope.resetPassword = function () {
            //show: function (popupName, template, scope, options) {
            modalService.show('forgot-password', 'js/partials/iframeModal.html', $scope, {
                frameSrc: authnHost + '/resetPassword',
                title: "Forgotten password"
            });
        };

感谢

登录面板

Answer 1

你可以做到

    $modalStack.dismissAll(reason);

这将关闭所有模态弹出窗口

AnsgularJS - modelService无法关闭第一个对话框

1 个答案: