當AngularUI Bootstrap模式被解散並且動畫完成時調用函數

Question

我正在使用Angular UI引導模式，並且遇到了一些問題。

我想在引導模式關閉動畫完成時調用一個函數。下面的代碼塊將在模態開始被解除時立即調用cancel（）函數 - 而不是在模態解除動畫結束時調用。

Angular UI不使用事件，所以沒有'hidden.bs.modal'事件被觸發（至少，不是我所知）。

var instance = $modal.open({...}); 

instance.result.then(function(data) { 
      return success(data); 
     }, function() { 
      return cancel(); 
     }) 

模式開始關閉時立即運行cancel（）塊。當Bootstrap模式的關閉動畫完成時，我需要執行代碼。

如何用角度UI實現這一點？

組件以供參考：

https://angular-ui.github.io/bootstrap/#/modal

謝謝！

Answer 1

有點晚，但希望它仍然有幫助！你可以劫持uib-modal-window指令，並檢查它的範圍何時被銷燬（這是一個隔離的範圍指令）。當範本從文檔中刪除時，作用域被銷燬。我也使用服務來封裝功能：

服務

app.service('Modals', function ($uibModal, $q) { 
    var service = this, 
     // Unique class prefix 
     WINDOW_CLASS_PREFIX = 'modal-window-interceptor-', 
     // Map to save created modal instances (key is unique class) 
     openedWindows = {}; 

    this.open = function (options) { 
    // create unique class 
    var windowClass = _.uniqueId(WINDOW_CLASS_PREFIX); 

    // check if we already have a defined class 
    if (options.windowClass) { 
     options.windowClass += ' ' + windowClass; 
    } else { 
     options.windowClass = windowClass; 
    } 

    // create new modal instance 
    var instance = $uibModal.open(options); 

    // attach a new promise which will be resolved when the modal is removed 
    var removedDeferred = $q.defer(); 
    instance.removed = removedDeferred.promise; 

    // remember instance in internal map 
    openedWindows[windowClass] = { 
     instance: instance, 
     removedDeferred: removedDeferred 
    }; 
    return instance; 
    }; 

    this.afterRemove = function (modalElement) { 
    // get the unique window class assigned to the modal 
    var windowClass = _.find(_.keys(openedWindows), function (windowClass) { 
     return modalElement.hasClass(windowClass); 
     }); 

    // check if we have found a valid class 
    if (!windowClass || !openedWindows[windowClass]) { 
     return; 
    } 

    // get the deferred object, resolve and clean up 
    var removedDeferred = openedWindows[windowClass].removedDeferred; 
    removedDeferred.resolve(); 
    delete openedWindows[windowClass]; 
    }; 

    return this; 
}); 

指令

app.directive('uibModalWindow', function (Modals) { 
    return { 
    link: function (scope, element) { 
     scope.$on('$destroy', function() { 
     Modals.afterRemove(element); 
     }); 
    } 
    } 
}); 

而在你的控制器使用它，如下所示：

app.controller('MainCtrl', function ($scope, Modals) { 
    $scope.openModal = function() { 
    var instance = Modals.open({ 
     template: '<div class="modal-body">Close Me</div>' + 
     '<div class="modal-footer"><a class="btn btn-default" ng-click="$close()">Close</a></div>' 
    }); 

    instance.result.finally(function() { 
     alert('result'); 
    }); 

    instance.removed.then(function() { 
     alert('closed'); 
    }); 
    }; 
}); 

我還寫了一篇關於它的博客文章here。