$ uibModal отклоняет проблему. Тогда это не функция - PullRequest
Новая
       30

$ uibModal отклоняет проблему. Тогда это не функция

0 голосов
/ 31 января 2020

Я переходил с angular 1.6.9 на angular 1.7.9, и когда я закончил все и проверил, что функциональные возможности все еще работают, я обнаружил проблему, вызывающую функцию, которая должна вызываться, когда я нажмите кнопку подтверждения в $ uibModal. Я получаю ошибку:

TypeError: utils.openModal (...). Тогда это не функция

Я уже искал некоторые возможные решения и проверить их, я достиг, чтобы не получить эту ошибку, но функция все еще не достигается. Я публикую здесь свой код, чтобы узнать, может ли кто-нибудь подсказать мне, что происходит.

У меня есть мой открытый модал в

utils.service. js

function openModal( body ) {
    var msg = typeof body === "string" ? body : body.message;
    var animation = body.animation === false ? false : true;
    var keyboard = body.keyboard === false ? false : true;
    var bodyTemplate = body.bodyTemplate ?
        "app/components/modal/" + body.bodyTemplate + ".html" :
        undefined;
    var deferred = $q.defer();

    switch ( body.backdrop ) {
        case "static":
            var backdrop = "static";
            break;
        case false:
            backdrop = false;
            break;
        default:
            backdrop = true;
            break;
    }
    var modalInstance = $uibModal
        .open( {
            component: "modal",
            controller: 'modalController',
            size: body.size || "md",
            appendTo: body.appendTo ||
                angular.element( document.getElementsByTagName( "body" )[ 0 ] ),
            animation: animation,
            backdrop: backdrop,
            keyboard: keyboard,
            windowClass: 'custom-margin app-modal-window-md',
            resolve: {
                title: function () {
                   return body.title;
                },
                subtitle: function () {
                   return body.subtitle;
                },
                cancelBtn: function () {
                    return body.showCancelBtn;
                },
                acceptBtn: function () {
                    return body.showAcceptBtn;
                },
                innerTemplate: function () {
                    return body.innerTemplate;
                },
                templateUrl: function () {
                    return body.templateUrl;
                },
                bodyTemplate: function () {
                    return bodyTemplate;
                },
                consent: function () {
                    return body.consent;
                },
            }
        }
    );

    modalInstance.result.then(
        function () {
            return deferred.resolve();
        },
        function () {
            return deferred.reject();
        }
    );
    return deferred;
}

Тогда у меня есть компонент:

modal.component. js

( function () {
  angular
    .module( 'app' )
    .component( 'modal', {
      templateUrl: 'app/components/modal/modal.html',
      controller: modalController,
      controllerAs: 'vm',
      bindings: {
        resolve: '<',
        close: '&',
        dismiss: '&'
      }
    } );


  modalController.$inject = [ '$translate' ];

  /** @ngInject */
  function modalController( $translate) {
    var vm = this;
    $translate.use( sessionStorage.getItem( 'lang' ) );
    vm.$onInit = function () {
      var res = vm.resolve;
      vm.title = res.title || 'SHARED.MODAL_TITLE_DEFAULT';
      vm.subtitle = res.subtitle;
      vm.hideCross = res.hideCross;
      vm.showCancel = res.showCancel;
      vm.cancelBtn = res.cancelBtn;
      vm.backdrop = res.backdrop;
      vm.innerTemplate = res.innerTemplate;
      vm.bodyTemplate = res.bodyTemplate;
      vm.hideCross = true;
      vm.block = res.consent;
    }
  }
} )();

И затем у меня есть компонент, в котором я собираюсь открыть модал и сделать все функции, о которых я упоминал ранее:

accept.component. js

function openRevokeConsentModal(ev, blockToRemove, appClientId, appIndex, blockIndex) {
    var parentElement = document.getElementById('permisos-tab');
    var parentAngularElement = angular.element(parentElement);
    $translate(['FEATURES.APPROVED.CANCEL_PERMIT']).then(function(translations) {
        var body = {
            title: translations['FEATURES.APPROVED.CANCEL_PERMIT'],
            bodyTemplate: 'modalRevokeConsent',
            appendTo: parentAngularElement,
            consent: blockToRemove,
            showCancelBtn: true
        };

        utils.openModal(body).then( // Here I get the problem so I cant call the  revokeConsent method.
            function() {

                var removeInfo = {
                    appInfo: {
                        clientId: appClientId,
                        appIndex: appIndex,
                        blockIndex: blockIndex
                    },
                    block: blockToRemove
                };
                //Unfocus the button
                if (ev.explicitOriginalTarget) {
                    ev.explicitOriginalTarget.blur();
                } else if (ev.srcElement) {
                    ev.srcElement.blur();
                }
                revokeConsent(removeInfo);
            },
            function() {
                //Unfocus the button
                if (ev.explicitOriginalTarget) {
                    ev.explicitOriginalTarget.blur();
                } else if (ev.srcElement) {
                    ev.srcElement.blur();
                }
            }
        );
    });
    utils.setModalPositions(200);
}

Кроме того, модальный шаблон имеет нижний колонтитул с кнопками:

модал. html

<div class="modal-footer center">
    <div class="footer-container">
    <div class="btn btn-default" ng-click="vm.close()" ng-class="{'pull-right btn-ok' : vm.cancelBtn, 'btn-cancel' : !vm.cancelBtn }">
        {{'SHARED.MOD_ACCEPT' | translate | uppercase }}
    </div>
    <div class="btn btn-default pull-left btn-cancel" ng-if="vm.cancelBtn" ng-click="vm.dismiss()">
        {{'SHARED.MOD_CANCEL' | translate | uppercase }}
    </div>
    </div>
</div>

Большое спасибо за то, что нашли время для этой проблемы. Я все еще ищу решение.

1 Ответ

0 голосов
/ 31 января 2020

Нет необходимости создавать обещание с $q.defer, когда API уже возвращает обещание: 

 function openModal( body ) {
    var msg = typeof body === "string" ? body : body.message;
    var animation = body.animation === false ? false : true;
    var keyboard = body.keyboard === false ? false : true;
    var bodyTemplate = body.bodyTemplate ?
        "app/components/modal/" + body.bodyTemplate + ".html" :
        undefined;
    ̶v̶a̶r̶ ̶d̶e̶f̶e̶r̶r̶e̶d̶ ̶=̶ ̶$̶q̶.̶d̶e̶f̶e̶r̶(̶)̶;̶

    //...

    var modalInstance = $uibModal
        .open( {

            //...

     } );

    //RETURN the promise 

    return modalInstance.result;

     /* DELETE this
     modalInstance.result.then(
        function () {
            return deferred.resolve();
        },
        function () {
            return deferred.reject();
        }
    );

    return deferred;
    */
}
...