Is there a pattern for dealing with "Cancel" in AngularJS modal dialogs?

Question

Note: This is not about showing a modal dialog with AngularJS, that topic has plenty of questions and answers!

This question is about how to react to both OK and Cancel within a modal dialog on a page. Let's say you've got a scope with just one variable in it:

$scope.description = "Oh, how I love porcupines..." 

If I provide you with a modal dialog on the page and use ng-model="description" within that dialog, all of the changes you make are actually made in real time to the description itself as you type. That's bad, because then how do you cancel out of that dialog?

There's this question that says to do what I explain below. The accepted answer for it is the same "solution" I came up with: AngularJS: Data-bound modal - save changes only when "Save" is clicked, or forget changes if "Cancel" is clicked

I can see how to do it if clicking the button to bring up a modal goes back to a function in the back and that creates a temporary copy of the relevant data for the modal and then pops up the modal. Then "OK" (or "Save" or whatever) could copy the temporary values to the actual model values.

main.js (excerpt):

$scope.descriptionUncommitted = $scope.description;  $scope.commitChanges = function () {   $scope.description = $scope.descriptionUncommitted; } 

main.html (excerpt):

<input type="text" ng-model="descriptionUncommitted"/>  <button ng-click="commitChanges()">Save</button> 

The problem with that is it's not declarative! In fact, it's nothing like AngularJS anywhere else. It's almost as though we need an ng-model-uncommitted="description" where they could make all the changes they want but they only get committed when we trigger with another declaration. Is there such a thing in a plugin somewhere or is AngularJS itself adding it?

Edit: It seems that an example of a different way of doing it might be in order.

main.js:

$scope.filename = "panorama.jpg"; $scope.description = "A panorama of the mountains.";  $scope.persist = function () { // Some function to hit a back end service. }; 

main.html:

<form>   <input type="text" ng-model-uncommitted="filename"/>   <input type="text" ng-model-uncommitted="description"/>    <button ng-commit ng-click="persist()">Save</button>   <button ng-discard>Cancel</button> </form> 

I stuck a form tag around it because I don't know how you would group the items so it was clear it was all part of the same "transaction" (for lack of a better word). But there would need to be some way that this could all happen automatically and the cloned copies of the model variables are used for initial values, used for input and updated automatically, validated, etc. and then finally discarded or copied to the same value that initially was used to create them if the user decides to commit.

Isn't something like this easier than code in the controller to do that work over and over again for 20 modals in a big website? Or am I nuts?

Answer 1

Basically, in angular if something is not declarative, you make a directive.

 .directive('shadow', function() {   return {     scope: {       target: '=shadow'                 },     link: function(scope, el, att) {       scope[att.shadow] = angular.copy(scope.target);        scope.commit = function() {         scope.target = scope[att.shadow];       };     }   }; 

Then:

  <div shadow="data">     <input ng-model="data">     <button ng-click="commit()">save</button>   </div> 

So data inside the shadow directive will be a copy of the original data. And it will be copied back to the original when the button is clicked.

And here is working example: jsbin

I've not tested it beyond this example, so it may not work in other cases, but I think it gives an idea of the possibilites.

Edit:

Another example with an object instead of a string, and several fields in the form (an additional angular.copy is required here): jsbin

Edit2, angular versions 1.2.x

As per this change, the input inside the directive is not accessing the isolated scope anymore. One alternative is creating a non-isolated child scope (scope:true), to hold the copy of the data and accessing the parent scope for saving it.

So for later versions of angular, this is the same approach as before slightly modified to do the trick:

.directive('shadow', function() {   return {     scope: true,     link: function(scope, el, att) {       scope[att.shadow] = angular.copy(scope[att.shadow]);        scope.commit = function() {         scope.$parent[att.shadow] = angular.copy(scope[att.shadow]);       };     }   }; }); 

Example: jsbin

Note that the problem with using $parent, is that it may break if eventually there is another scope in the middle.

Answer 2

As of Angular 1.3 there is ngModelOptions directive that allows to achive the same behaviour natively.

<form name="userForm">     <input type="text" ng-model="user.name" ng-model-options="{ updateOn: 'submit' }" name="userName">     <button type="submit">save</button>     <button type="button"  ng-click="userForm.userName.$rollbackViewValue();">cancel</button> </form> 

JSFiddle: http://jsfiddle.net/8btk5/104/