Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app='app'>
  <div ng-controller='mainCtrl'>
    <p>
      Press <kbd>Enter</kbd> to save (dumps to console)
    </p>
    <p> 
      Press <kbd>Esc</kbd> to cancel (dumps to console + last value should be updated in the input)
    </p>
    <input type=text ng-model=dirty.value cancelable-input />
  </div>
  </body>
</html>
 
​
 
var app = angular.module('app', []);
​
app.controller('mainCtrl', function ($scope) { 
  $scope.dirty = {value : 15};
});
​
app.directive('cancelableInput', function($timeout) { 
  return { 
    restrict : "A",
    require : 'ngModel',
    scope : { ngModel : '=?'},
    link : function (scope, element, attrs, ngmodel) { 
      // initial
      scope.last_saved_value = ngmodel.$viewValue;
      
      scope.update = function() { 
        console.log('Updating external value ', ngmodel.$viewValue);
        scope.last_saved_value = ngmodel.$viewValue;
      };
      
      element.bind('keydown', function(event) { 
        // ENTER
        if (event.which === 13)
            scope.update();
        // ESC
        else if (event.which === 27) {
            console.log('Canceling. Last saved value is ',scope.last_saved_value);
            scope.$apply(function () { 
              scope.ngModel = scope.last_saved_value;
            });
        }
      });
    }
  };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers