角度模态服务关闭问题

Question

我使用angular模式服务来显示来电弹出窗口。

一切似乎都正常，但在特殊情况下，弹出窗口关闭，留下灰色的覆盖，阻塞了整个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>

(function () { 'use strict'；

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'，控制器：'IncomingCallController'，控制器vm：'vm'，输入：{ from: dataNew.callerName || ''，instId: dataNew.extraHeaders'X-Ph-Instid‘|| dataNew.extraHeaders'X-Ph-instid'，confName:$rootScope.conferenceData.conf_name } }).then(function(modal) { modal.element.modal()；modal.close.then(function( result ) {//$result.function=result？“你说是”：“你说不是”；})；})；

‘使用严格的’；

让模块= angular.module('angularModalService'，[])；

module.factory('ModalService'，['$animate'，'$document'，'$compile'，'$controller'，'$http'，'$rootScope'，'$q'，'$templateRequest'，'$timeout'，function($animate，$document，$compile，$controller，$http，$rootScope，$q，$templateRequest，$timeout) {

函数ModalService() {

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

}

return new ModalService()；}])；

​

​

我花了几个小时在互联网上找出为什么会发生这种情况，但未能解决它，我觉得当任何点击事件发生时，它工作正常，但无法正常关闭时，操作是performed.Please帮助！！

提前感谢

Answer 1

我也有同样的问题，这是由于我的HTML文件顶部的一个注释。当我删除评论时，它工作得很好。不过，我还是不明白这个bug的原因。

希望你也有同样的情况。