Question

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

一切似乎都有效，但在特殊情况下，弹出窗口关闭，留下灰色叠加层阻挡整个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>

-------------------------模态弹出控制器------------------- -----------

（function（）{ ＆＃39;使用严格的＆＃39;;

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：＆＃39; ../../ partials / calls.incoming.popup.html＆＃39;， controller：＆＃39; IncomingCallController＆＃39;，控制器：＆＃39; vm＆＃39;，输入：{ 来自：dataNew.callerName || ＆＃39;＆＃39 ;, instId：dataNew.extraHeaders [＆＃39; X-Ph-Instid＆＃39;] || dataNew.extraHeaders [＆＃39; X-PH-instid＆＃39]， confName：$ rootScope.conferenceData.conf_name } }）。then（function（modal）{ modal.element.modal（）; modal.close.then（function（result）{ //$scope.message =结果？＆＃34;你说是＆＃34; ：＆＃34;你说不是＆＃34 ;; }）; }）;

----------------------------------角度模态服务代码--------- -------------------------

＆＃39;使用严格的＆＃39;;

让module = angular.module（＆＃39; angularModalService＆＃39;，[]）;

module.factory（＆＃39; ModalService＆＃39;，[＆＃39; $ animate＆＃39;，＆＃39; $ document＆＃39;，＆＃39; $ compile＆＃39;，＆＃39; ; $ controller＆＃39;，＆＃39; $ http＆＃39;，＆＃39; $ rootScope＆＃39;，＆＃39; $ q＆＃39;，＆＃39; $ templateRequest＆＃39;，＆＃39; ; $超时＆＃39 ;, 函数（$ 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;
};

}

返回新的ModalService（）; }]）;

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

提前致谢

Answer 1

我遇到了同样的问题，这是由于我的HTML文件顶部有评论。当我删除评论时，它工作正常。我没有理解这个错误的原因。

希望你有同样的情况。

角度模式服务结束问题

1 个答案: