Bestätigen Sie das modale Schließen des Winkels auf der schmutzigen Form

Question

Ich habe ein Angular-UI modal mit einer Form darin. Wenn der Benutzer das Kündigungs-Ereignis auslöst, möchte ich eine Bestätigung basierend auf $ dirty implementieren. Ich habe zahlreiche Quellen durchsucht, um Begriffe auf Promise zu finden und kann z. eine Warnung während der Abschlussveranstaltung. Allerdings kann ich nirgends finden, wie man das Modal tatsächlich zum Schließen bringt.

EDIT:

Mit dem aktuellen Code der Bestätigungsnachfrage oft (überraschenderweise nicht immer) erscheint nach dem modalen bereits entlassen wurde.

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

ich es feste $scope.$on verwenden, ausführliches Beispiel 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

Fügen Sie die $ scope.ok Methode und haken es zu den wichtigsten Absenden-Button des EditForm ng Sie auf

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); 
    }; 
} 

Injizieren Sie die $ scope.edeitForm. $ Schmutzig wie isDirty und verwenden, um den injizierten Wert, wie Sie

$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'); 
    }); 
} 

mögen

Hope this helfen Ihnen: D