確認角度模態關閉在髒的表格

Question

我有一個Angular-UI模式的表單。當用戶觸發dismiss事件時，我想實現基於$ dirty的確認。我已經搜索了很多來源，找到Promise的概念，並可以成功地獲得在結束活動期間發出警報。但是，我無法找到任何地方如何實際停止模式關閉。

編輯：

隨着當前代碼確認警報常（令人驚訝的並不總是）的模式已經被駁回後彈出。

var editResourceModalController = function($scope, $uibModalInstance) { 

    $uibModalInstance.result.catch(function() { 
     if ($scope.editForm.$dirty) { 
      window.confirm("close modal?"); 
     } 
     $uibModalInstance.dismiss('cancel'); 
    }); 

} 

var uibModalInstance; 
$scope.openEditModal = function() { 
    uibModalInstance = $uibModal.open({ 
     animation: true, 
     templateUrl: "edit.html", 
     controller: editResourceModalController 
    }); 
} 

Answer 1

我固定它使用$scope.$on，廣泛例如here

var editResourceModalController = function($scope, $uibModalInstance) { 

    $scope.close = function() { 
     $uibModalInstance.close(); 
    } 

    $scope.$on('modal.closing', function(event) { 
     if ($scope.editForm.$dirty) { 
      if (!confirm("U sure bwah?")) { 
       event.preventDefault(); 
      } 
     } 

    }); 
} 

var uibModalInstance; 
$scope.openEditModal = function(editItem, hierarchy, selectedFolder) { 
    uibModalInstance = $uibModal.open({ 
     animation: true, 
     templateUrl: "edit.html", 
     controller: editResourceModalController   
    }); 
} 

Answer 2

添加$ scope.ok方法，它勾到editForm的提交按鈕的NG單擊

var editResourceModalController = function($scope, editItem, hierarchy, selectedFolder) { 
    $scope.form = {}; 
    $scope.editItem = editItem; 
    $scope.editListItems = []; 
    $scope.listItems = 0; 
    $scope.getNumber = function(n) { 
     return new Array(n); 
    } 
    $scope.hierarchy = hierarchy; 
    $scope.selectedFolder = selectedFolder; 
    $scope.editModel = { 
     name: $scope.editItem.name, 
     description: $scope.editItem.description, 
     hierarchyId: $scope.selectedFolder 
    } 
    $scope.ok = function() { 
     editItem.close($scope.editForm.$dirty); 
    }; 
} 

注入$ scope.edeitForm。髒$爲isDirty和如你所願使用注入值

$scope.openEditModal = function(editItem, hierarchy, selectedFolder) { 
    $scope.modalInstance = $uibModal.open({ 
     animation: true, 
     templateUrl: "edit.html", 
     controller: ["$scope", "editItem", "hierarchy", "selectedFolder", editResourceModalController], 
     resolve: { 
      editItem: function() { 
       return editItem; 
      }, 
      hierarchy: function() { 
       return hierarchy; 
      }, 
      selectedFolder: function() { 
       return selectedFolder; 
      } 
     } 
    }); 

    $scope.modalInstance.result.catch(function(isDirty) { 
     if (isDirty) { 
      // confirmation code here 

     }else{ 
      // other logic 
     } 
     // dismiss the modal 
     editItem.dismiss('cancel'); 
    }); 
} 

希望這有助於你：d