angularjs - Angular 模态服务关闭问题

Question

我正在使用 Angular 模态服务来显示来电弹出窗口。

一切似乎都正常，但在特定情况下，弹出窗口关闭，留下灰色覆盖层，挡住了整个 UI。

当我手动单击弹出窗口中提供的拒绝和关闭按钮时，弹出窗口完美关闭，但当我使用超时关闭弹出窗口而不对其进行任何操作时，出现异常行为。

为了引用，我给出了我的全部代码。

----------------------------模态弹出UI代码---------------- --------------

 <div class="modal fade">
              <div class="modal-dialog modal-lg modal-dialog-custom">
                <div class="modal-content modal-content-dialog">
                    <div class="modal-header">
                      <audio class="incoming-videoconference-audio" autoplay loop>
                        <source src="../images/dataCallIncoming.mp3" type="audio/mpeg">
                      </audio> 
                            <button type="button" class="close" ng-click="vm.hangUp()" data-dismiss="modal" aria-hidden="true">&times;</button>
                            <h4 class="modal-title">Incoming Call</h4>
                          </div>
                          <img class="incoming-nowConf-logo" src="../images/new_nowconfer_e.png" />
                          <div id="state" class="grid_4 alpha">
                                    <div class="gps_ring"></div>
                                </div>
                          <div class="modal-body modal-body-custom">
                              <div style="text-overflow:ellipsis;overflow:hidden;" class="call-from">
                                {{vm.confName}}

                              </div>
                                <div class="call-control">
                                    <button type="button"class="btn-sm btn-sm-gray cancel-btn" ng-click="vm.hangUp()" data-dismiss="modal">Reject</button>
                                    <span style="width:50px;">&nbsp;</span>
                                    <button type="button"class="btn-sm btn-sm-green" ng-click="vm.accept()"  data-dismiss="modal">Answer</button>
                                </div>
                            </div>
                  </div>
          </div>
    </div>

------------------------模态弹出 Controller -------------------- ----------

(函数(){ '使用严格';

angular
    .module('incomingModule')
    .controller('IncomingCallController', IncomingCallController);

IncomingCallController.$inject = ['$scope','$rootScope','plivoclient','$routeParams','$location','close','from', 'instId','confName','$timeout'];

function IncomingCallController($scope,$rootScope , plivoclient,$routeParams ,$location,close, from, instId,confName,$timeout) {
    var vm = this;
    vm.connecting = false;
    vm.from = from;
    vm.confName = confName;

    vm.dismissModal = function(result) {
         plivoclient.conn.reject();
         console.log('vm.dismissModal::'+result);
        close(result, 200); // close, but give 200ms for bootstrap to animate
     };

     activate();

     function activate(){
        $timeout(function(){
            vm.dismissModal('cancel');
        },25000);
     }

    vm.accept = function() {
        plivoclient.conn.answer();
        vm.connecting = true;
        console.log("incoming call accept............");
        vm.dismissModal('accept');
        $timeout(function(){
            $location.path( "/call/"+$rootScope.id2);
        },300);

    };

    vm.hangUp = function() {
        plivoclient.conn.reject();
        vm.dismissModal('reject');
        console.log("incoming call hangedup............");
    };
}

}());

------------------------打开模态代码-------------------- ----------------------

ModalService.showModal({ templateUrl: '../../partials/calls.incoming.popup.html', Controller :'IncomingCallController'， controllerAs: 'vm', 输入:{ 来自:dataNew.callerName || '', instId: dataNew.extraHeaders['X-Ph-Instid'] || dataNew.extraHeaders['X-Ph-instid'], session 名称:$rootScope.conferenceData.conf_name } }).then(函数(模态){ modal.element.modal(); modal.close.then(函数(结果){ //$scope.message = 结果 ? "你说是": "你说不"; }); });

--------------------------------angular模态服务代码-------- --------------------------

'使用严格';

let module = angular.module('angularModalService', []);

module.factory('ModalService', ['$animate', '$document', '$compile', '$controller', '$http', '$rootScope', '$q', '$templateRequest ', '$超时', 函数($animate，$document，$compile，$controller，$http，$rootScope，$q，$templateRequest，$timeout){

函数模态服务(){

var self = this;

//  Returns a promise which gets the template, either
//  from the template parameter or via a request to the
//  template url parameter.
var getTemplate = function(template, templateUrl) {
  var deferred = $q.defer();
  if (template) {
    deferred.resolve(template);
  } else if (templateUrl) {
    $templateRequest(templateUrl, true)
      .then(function(template) {
        deferred.resolve(template);
      }, function(error) {
        deferred.reject(error);
      });
  } else {
    deferred.reject("No template or templateUrl has been specified.");
  }
  return deferred.promise;
};

//  Adds an element to the DOM as the last child of its container
//  like append, but uses $animate to handle animations. Returns a
//  promise that is resolved once all animation is complete.
var appendChild = function(parent, child) {
  var children = parent.children();
  if (children.length > 0) {
    return $animate.enter(child, parent, children[children.length - 1]);
  }
  return $animate.enter(child, parent);
};

self.showModal = function(options) {

  //  Get the body of the document, we'll add the modal to this.
  var body = angular.element($document[0].body);

  //  Create a deferred we'll resolve when the modal is ready.
  var deferred = $q.defer();

  //  Validate the input parameters.
  var controllerName = options.controller;
  if (!controllerName) {
    deferred.reject("No controller has been specified.");
    return deferred.promise;
  }

  //  Get the actual html of the template.
  getTemplate(options.template, options.templateUrl)
    .then(function(template) {

      //  Create a new scope for the modal.
      var modalScope = (options.scope || $rootScope).$new();
      var rootScopeOnClose = $rootScope.$on('$locationChangeSuccess', cleanUpClose);

      //  Create the inputs object to the controller - this will include
      //  the scope, as well as all inputs provided.
      //  We will also create a deferred that is resolved with a provided
      //  close function. The controller can then call 'close(result)'.
      //  The controller can also provide a delay for closing - this is
      //  helpful if there are closing animations which must finish first.
      var closeDeferred = $q.defer();
      var closedDeferred = $q.defer();
      var inputs = {
        $scope: modalScope,
        close: function(result, delay) {
          if (delay === undefined || delay === null) delay = 0;
          $timeout(function() {

            cleanUpClose(result);

          }, delay);
        }
      };

      //  If we have provided any inputs, pass them to the controller.
      if (options.inputs) angular.extend(inputs, options.inputs);

      //  Compile then link the template element, building the actual element.
      //  Set the $element on the inputs so that it can be injected if required.
      var linkFn = $compile(template);
      var modalElement = linkFn(modalScope);
      inputs.$element = modalElement;

      //  Create the controller, explicitly specifying the scope to use.
      var controllerObjBefore = modalScope[options.controllerAs];
      var modalController = $controller(options.controller, inputs, false, options.controllerAs);

      if (options.controllerAs && controllerObjBefore) {
        angular.extend(modalController, controllerObjBefore);
      }

      //  Finally, append the modal to the dom.
      if (options.appendElement) {
        // append to custom append element
        appendChild(options.appendElement, modalElement);
      } else {
        // append to body when no custom append element is specified
        appendChild(body, modalElement);
      }

      //  We now have a modal object...
      var modal = {
        controller: modalController,
        scope: modalScope,
        element: modalElement,
        close: closeDeferred.promise,
        closed: closedDeferred.promise
      };

      //  ...which is passed to the caller via the promise.
      deferred.resolve(modal);

      function cleanUpClose(result) {

        //  Resolve the 'close' promise.
        closeDeferred.resolve(result);

        //  Let angular remove the element and wait for animations to finish.
        $animate.leave(modalElement)
                .then(function () {
                  //  Resolve the 'closed' promise.
                  closedDeferred.resolve(result);

                  //  We can now clean up the scope
                  modalScope.$destroy();

                  //  Unless we null out all of these objects we seem to suffer
                  //  from memory leaks, if anyone can explain why then I'd
                  //  be very interested to know.
                  inputs.close = null;
                  deferred = null;
                  closeDeferred = null;
                  modal = null;
                  inputs = null;
                  modalElement = null;
                  modalScope = null;
                });

        // remove event watcher
        rootScopeOnClose && rootScopeOnClose();
      }

    })
    .then(null, function(error) { // 'catch' doesn't work in IE8.
      deferred.reject(error);
    });

  return deferred.promise;
};

返回新的模态服务()；}]);

我花了几个小时在互联网上弄清楚为什么会发生这种情况但未能解决它，我觉得当任何点击事件发生时它工作正常但在执行操作时无法正确关闭。请帮助!!

提前致谢

Answer 1

我有同样的问题，这是由于我的 HTML 文件顶部的注释所致。当我删除评论时，它工作正常。虽然我没有得到这个错误的原因。

希望你也有同样的情况。