In my project, I have set up a ng-repeat loop to display blocks that can be edited in a modal window. The goal is to allow users to make changes and then cancel the window to discard any modifications. While the modal window is functioning correctly and editing blocks as intended, I am encountering an issue with reverting changes back to the original element when the cancel button is clicked.
Below is the HTML code for the ng-repeat section:
<div class="container" style="max-width: 600px;">
<div ng-repeat="block in blocks" class="text-muted" ng-drop="true" ng-drop-success="onDropComplete($index, $data ,$event)">
<!-- Block Content -->
</div>
</div>
Here is the markup for the modal:
<script type="text/ng-template" id="myModalContent.html">
<div class="modal-header">
<h3 class="modal-title">Edit Block</h3>
</div>
<div class="modal-body">
<!-- Form Fields -->
<form class="form-group">
<input class="form-control" placeholder="Title" type="text" ng-model="block.title"/>
<input class="form-control" placeholder="Main Body" type="text" ng-model="block.body"/>
<button class="btn btn-success" type="submit" ng-click="saveBlock()"> Save </button>
<button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</form>
</div>
</script>
Lastly, here is the relevant controller logic:
$scope.modalUpdate = function (selectedBlock) {
var modalInstance = $uibModal.open({
animation: $scope.animationsEnabled,
templateUrl: 'myModalContent.html',
controller: function($scope, $uibModalInstance, block){
$scope.backUp = angular.copy(block);
$scope.block = block;
$scope.saveBlock = function () {
$uibModalInstance.close($scope.block);
};
$scope.cancel = function () {
$scope.block = angular.copy($scope.backUp);
$uibModalInstance.dismiss('cancel');
};
},
size: 'sm',
resolve: {
block: function () {
return selectedBlock;
}
}
});
Despite implementing the cancel functionality, changes to the block remain persisted after clicking cancel. Any advice on resolving this issue would be greatly appreciated!