角モーダルサービス閉鎖問題

私は角度モーダルサービスを使用して着信ポップアップを表示しています。角モーダルサービス閉鎖問題

すべてがうまくいくようですが、ポップアップが閉じると、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>

-------------------------モーダルポップアップコントローラ - ----------------------------

（関数（）{ 'は厳密使用';

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' controllerAs： 'VM'、入力：{から：dataNew.callerName || ''、 instId：dataNew.extraHeaders [ 'X-PH-Instid'] || dataNew。 extraHeaders ['X-Ph-instid']、 confName：$ rootScope.conferenceData.conf_name } }）。then（関数（モーダル） { modal.element.modal（）; modal.close.then（function（result）{ //$scope.message = result？ "あなたは言った" "あなたはいいえ"; }）; }）;

----------------------------------角モダールサービスコード-------- --------------------------

'use strict';

let module = angular.module（ 'angularModalService'、[]）;

モジュール。（ 'ModalService'、 '$ animate'、 '$ document'、 '$ compile'、 '$ controller'、 '$ http'、 '$ rootScope'、 '$ q'、 '$ templateRequest'、 '$ timeout 」関数（$アニメーション、$文書、$コンパイル、$コントローラ、$ HTTP、$ rootScope、$ Q、$ templateRequest、$タイムアウト）{

関数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（）; }]）;