阻止基於模態控制器內部邏輯的AngularJS模態關閉

Question

有沒有辦法阻止模態控制器邏輯中的AngularJS模態關閉/關閉？

我想要的是在用戶關閉模式時顯示警告，並且模態內的表單包含未保存的數據。

我試過尋找一個關閉事件或其他我可以在official documentation中使用的東西，但目前還沒有運氣。

Answer 1

，您可以觀看「modal.closing」事件，廣播到模式的範圍，就像這樣：

.controller('modalCtrl', function($scope, $modalInstance) { 

    $scope.$on('modal.closing', function(event, reason, closed) { 
     var r = prompt("Are you sure you wanna close the modal? (Enter 'YES' to close)"); 

     if (r !== 'YES') { 
     event.preventDefault(); 
     } 
    }); 
}) 

的第一個參數是事件，你可以的preventDefault（）以防止它從關閉。

第二個參數是原因（無論傳遞給$接近（）方法）

第三個參數是一個布爾指示模態是否被關閉或駁回。

這裏工作plunker

我不知道什麼時候該加入，但目前它的官方文檔中提到。

Answer 2

如果您在您的modalInstance中設置backdrop: 'static'，解決問題？

像這樣：

var modalInstance = $modal.open({ 
    ... 
    backdrop: 'static', 
    ... 
}); 

然後，你只需要控制負責關閉模式的ngClick按鈕。

希望這會有所幫助。

UPDATE 1只詳細說明]

使用keyboard: false爲禁用Escape：

var modalInstance = $modal.open({ 
    ... 
    backdrop: 'static', 
    keyboard: false 
    ... 
}); 

更新2

我研究，發現了一個選擇。在你的模態控制器，使用方法：

$modalInstance.result.then(function (e) { 
    //... 
}, function (e) { 
    //called before modal close 
}); 

例子：

var modalInstance = $modal.open({ 
    templateUrl: templateUrl, 
    controller: modalController 
}); 

function modalController($scope, $modalInstance){ 

... //your code 

    $modalInstance.result.then(function (e) { 
     //... 
    }, function (e) { 
     //called before modal close 
    }); 

... //your code 

} 

但是，你需要一種方法來無法繼續事件關閉模式。或者允許用戶在關閉模式之前保存數據。這是迄今爲止。

UPDATE 3

Check this。

Answer 3

這將觸發$ modal.close事件停止背景：

$modal.open({ 
    // ... other options 
    backdrop : 'static', 
    keyboard : false 
}); 

鍵盤的ESC關鍵還是可以關閉模​​式，所以如果你想魔鬼在使用keyboard: false