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

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

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

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

2015-02-10 Mark

在文檔他們在點擊取消按鈕時使用取消功能。然後調用「$ modalInstance.dismiss（'cancel'）;」在ModalInstanceCtrl中。如果有未保存的數據，你不能在那裏檢查嗎？ – Viktor 2015-02-10 10:50:38

不幸的是，當用戶點擊背景或按下退出鍵時，模式也會關閉，這個功能應該保持不變。 – Mark 2015-02-10 12:41:54

我檢查了模態指令的源代碼，我找不到任何可以阻止它關閉的東西。分叉它並修改模塊或使用別的東西。你可以向angular-ui團隊建議這個壯舉，甚至可以自己添加它。 – Viktor 2015-02-10 13:05:15

，您可以觀看「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

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

來源

2015-09-21 15:02:27

看起來他們已經添加了它，謝謝你的回答！ – Mark 2015-09-22 12:30:33

如果您在您的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。

來源

2015-02-10 10:52:01 Doug

感謝您的思考，我也想到了這一點，但產品負責人希望在選擇背景幕時可以忽略對話框。所以使它靜態不是一個選項不幸的是 – Mark 2015-02-10 12:38:00

我更新了我的答案。看看它是否有幫助。 – Doug 2015-02-10 13:22:08

非常感謝！我是否正確，最近的更新指定如何捕捉事件，但不是阻止它在前面的方式？ – Mark 2015-02-10 15:57:37

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

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

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

來源

2016-09-07 19:36:43 chovy

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

回答

相關問題