【问题标题】:Angularjs Modal: Returning state from serviceAngularjs Modal:从服务返回状态
【发布时间】:2019-01-02 08:19:02
【问题描述】:

在这里使用 angularjs:

我查看了以下论坛的问题,但无法解决这个问题:returning data from angularjs modal dialog service

我有以下模态html:

<div class="confirm-modal-header">
  <h4 class="modal-title">{{modalOptions.headerText}}</h4>
 </div>
<div class="modal-body">
<p>{{modalOptions.bodyText}}</p>
</div>
    <div class="modal-footer">
    <button type="button" class="btn"
        data-ng-click="modalOptions.close()">
    {{modalOptions.closeButtonText}}
    </button>
    <button type="button" class="btn btn-danger"
        data-ng-click="modalOptions.ok();">
    {{modalOptions.actionButtonText}}
    </button>
</div>

我也有这方面的服务:

CTApp.factory("dialogModalService", ["$q", "$timeout", "$state", "$modal", 
function ($q, $timeout, $state, $modal) {

    var service = {}  

    var modalDefaults = {
        backdrop: true,
        keyboard: true,
        modalFade: true,
        templateUrl: '/app/modal.html'
    };

    var modalOptions = {
        closeButtonText: 'Close',
        actionButtonText: 'OK',
        headerText: 'Proceed?',
        bodyText: 'Perform this action?'
    };

    service.showModal = function (customModalDefaults, customModalOptions) {
        if (!customModalDefaults) customModalDefaults = {};
        customModalDefaults.backdrop = 'static';
        return this.show(customModalDefaults, customModalOptions);
    };

    service.show = function (customModalDefaults, customModalOptions) {
        //Create temp objects to work with since we're in a singleton service
        var tempModalDefaults = {};
        var tempModalOptions = {};

        //Map angular-ui modal custom defaults to modal defaults defined in service
        angular.extend(tempModalDefaults, modalDefaults, customModalDefaults);

        //Map modal.html $scope custom properties to defaults defined in service
        angular.extend(tempModalOptions, modalOptions, customModalOptions);

        if (!tempModalDefaults.controller) {
            tempModalDefaults.controller = function ($scope, $modalInstance) {
                $scope.modalOptions = tempModalOptions;
                $scope.modalOptions.ok = function (result) {
                    $modalInstance.close(result);
                };
                $scope.modalOptions.close = function (result) {
                    $modalInstance.dismiss('cancel');
                };
            }
        }

        return $modal.open(tempModalDefaults).result;
    };

    return service;
}

]);

上面的模态被我的控制器调用为:

 dialogModalService.showModal({}, modalOptions).then(function (result) 
 {
    //check for result returned
 }

现在在我的控制器中,我想检查用户是否按下了取消按钮。如何检查?

我尝试将取消与

一起传递
modalOptions.close('cancel')

但它永远不会进入我的 dialogModalService.showModal 控制器循环。

在我的浏览器中,我也尝试在上面的调用中放置一个断点,但它再次没有命中。

我在这里做错了什么?

【问题讨论】:

    标签: javascript angularjs


    【解决方案1】:

    在您的模态服务中尝试更改:

    $modalInstance.dismiss('cancel');
    

    $modalInstance.close('cancel');
    

    【讨论】:

    • 这很简单。这工作正常。对于其他人,原因是: close(result) - 一种可用于关闭模态的方法,传递结果dismiss(reason) - 一种可用于关闭模态的方法,传递一个原因 result - 一个承诺关闭模式时解决,关闭模式时拒绝
    猜你喜欢
    • 2014-01-28
    • 1970-01-01
    • 2019-02-24
    • 2017-01-16
    • 2015-09-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多