Quantcast
Channel: Is there a pattern for dealing with "Cancel" in AngularJS modal dialogs? - Stack Overflow
Viewing all articles
Browse latest Browse all 7

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

0
0

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?


Viewing all articles
Browse latest Browse all 7

Latest Images

Trending Articles



Latest Images