javascript - How do I implement a cancellable editable field in Angular? -

In my model, I have an area for which I need many controls to force. One of these controls is a text box. The text box should not directly edit the field, but rather the user should be allowed to type and then either change or cancel. If any other operation occurs, then any changes in the text field should be overwritten. One obstacle is that there are other UI components which change values ​​and do not reach the local area.

I have applied the desired behavior with the instruction:

It works, but I think there should be a better way of doing this. Any ideas?

  & lt; div ng-app = "app" ng-controller = "controller" & gt; & Lt; Div & gt; {{Foo}} & lt; / Div & gt; & Lt; Button ng-click = "increment ()" & gt; Increment & lt; / Button & gt; & Lt; Button ng-click = "decrease ()" & gt; Subtraction & lt; / Button & gt; & Lt; Br / & gt; & Lt; Div shadow = "foo" & gt; & Lt; Input type = "text" ng-model = "foo" /> & Lt; Button ng-click = "comm ()" & gt; Update & lt; / Button & gt; & Lt; Button ng-click = "cancel ()" & gt; Cancel & lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
  var app = angular Module ('app', []); Var controller = app.controller ('controller', function ($ scope) {$ scope.foo = 1; $ scope.increment = function} {++ $ scope.foo;}; $ scope.decrement = function { - $ scope.foo;};}); Var Directive = app.directive ('shadow', function () {return: scope: true, link: function (scope, l, et) {scope. $ Parent. $ Watch (et shadow, function (newvalue) {scope) [Att.shadow] = newValue;}); scope.commit = function () {radius .parent [att.shadow] = angular.copy (scope [att.shadow]);}; scope.cancel = function () {Scope [etshored] = angular copy (scope. $ Guardian [et shadow]);}}}};});    
 
 
 Think that you're a bit upside down :)  
 View:    & lt; Div ng-controller = "shadowcontroller" & gt; & Lt; H1 & gt; {{Foo}} & lt; / H1> & Lt; Div & gt; & Lt; Button ng-click = "increment ()" & gt; Increment & lt; / Button & gt; & Lt; Button ng-click = "decrease ()" & gt; Subtraction & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; input type = "text" ng-model = "tempFoo" /> & Lt; Button ng-click = "comm ()" & gt; Update & lt; / Button & gt; & Lt; Button ng-click = "cancel ()" & gt; Cancel & lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 Controller:  
 . Controller ('shadow controller', function ($ radius) {$ scope.foo = 1; $ scope.increment = function} {++ $ scope.foo; $ Scope.cancel ();}} $ scope.decrement = function () {- $ scope.foo; $ Scope.cancel ();}; $ Scope.commit = function () {$ Scope.foo = parseFloat ($ scope.tempFoo);}; $ Scope.cancel = function () {$ scope.tempFoo = $ scope.foo;}; $ Scope.cancel ();});   
 Enable the Enable / Cancel only button to keep track of the changes in the temp value and if there is a difference between the original and the temporary.  
 See:  
  & lt; Div ng-controller = "shadowControllerAdv" & gt; & Lt; H1 & gt; {{Data.original}} & lt; / H1> & Lt; Div & gt; & Lt; Button ng-click = "increment ()" & gt; Increment & lt; / Button & gt; & Lt; Button ng-click = "decrease ()" & gt; Subtraction & lt; / Button & gt; & Lt; / Div & gt; & Lt; Div & gt; & Lt; Input type = "text" ng-model = "data.edit" /> & Lt; Button ng-click = "comma ()" ng-disabled = "! State has been changed" & gt; Update & lt; / Button & gt; & Lt; Ng-click button = "reset ()" ng-disabled = "! State. Hschanged" & gt; Cancel & lt; / Button & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 Controller:  
  .controller ('ShadowControllerAdv', function ($ scope) {var _dataWatcher; $ scope.data = {original: 1}; $ Scope.state = {has been changed: incorrect}; function_startwotter () {_dataWatcher = $ scope. $ Watch ('data.edit', function (newview, oldview) {if (newname! == old current) { $ scope.state .hasChanged = true;} and {$ scope.state.hasChanged = false;}}, correct);} function _stop water () {if (! _dataWatcher) {return;} _dataWatcher ();} $ scope .reset = function () {_stopWatcher (); $ scope.data.edit = $ scope.data.original; $ scope.state.has changed = false; _startWatcher ();} $ scope.commit = function () {_stopWatcher (); $ Radius Data.original = ParseFloat ($ scope.data.edit); $ scope.reset ();} $ scope.increment = function () {$ scope.data.original = $ scope.data.original + 1; $ scope reset ();} ; $ Scope.decrement = function () {$ scope.data.original = $ scope.data.original - 1; $ scope.reset ();}; $ scope.reset ();});