Blur Auto Save + Undo Button

Question

I am writing a directive that will act as follows:

• allow editing of some text (using editable content)
• In case of loss of focus, it should retain its value for the model (recently viewed and stored in the database)
• There should be a Undo button that discards the changes.

My implementation: http://plnkr.co/edit/DsWEYQV4j51i4GO6KjSe?p=preview

The only problem I encounter is when I click the Cancel button, the DIV loses focus (so the focusout event occurs), and the value is saved in the model, so the Cancel button cannot return its value.

(I click cancel → focus event (autosave) → click event (??? cannot return))

Possible workarounds that I see:

• set the timeout to blur and cancel it if the "cancel" button was pressed. But this is ugly, because the user can enter a value and go to another part of the application, so the save timeout will not start any $ hourly listeners.
• save the value to focusin and restore it when the cancel button is saved. This causes another problem: $ watch listeners will work with the changed value and then run again with the previous value (so there will be 2 entries in the DB instead of one)

Does anyone have a solution for this behavior (autosave on blur + destruction)?

Answer 1

How about using debounce underscore.js or the like to cause a delay on autosave where it will check the cancel flag and cancel? Not sure what $ watch watchers do. Of course, it still will not work if the user completely exits the application or refreshes the page, etc.