I have a situation where I need to display a list of items with an "edit" button next to each one. When the user clicks on the edit button, an Angular UI modal window opens allowing them to make changes to the item. The problem I encountered was that any changes made in the edit window were immediately reflected in the list item without confirmation from the user. I wanted the item to only update when the user clicked 'ok' and remain unchanged if they clicked 'cancel'.
To work around this issue, I created a copy of the selected item to serve as a model for the view:
var modalInstance = $modal.open({
templateUrl: 'scripts/app/views/editBond.html',
controller: function ($scope, $modalInstance, bond) {
$scope.bond = angular.copy(bond);
$scope.ok = function () {
$modalInstance.close($scope.bond);
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
},
resolve: {
bond: function () {
return bond;
}
}
});
Is using angular.copy() the best solution to prevent these issues? Could this be a scope problem?