angularjs: add escape behavior

architecture-examples/angularjs/index.html

@@ -26,7 +26,7 @@ <h1>todos</h1>
 							<button class="destroy" ng-click="removeTodo(todo)"></button>
 						</div>
 						<form ng-submit="doneEditing(todo)">
-							<input class="edit" ng-model="todo.title" todo-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
+							<input class="edit" ng-model="todo.title" todo-escape="revertEditing(todo)" todo-blur="doneEditing(todo)" todo-focus="todo == editedTodo">
 						</form>
 					</li>
 				</ul>
@@ -66,5 +66,6 @@ <h1>todos</h1>
 		<script src="js/services/todoStorage.js"></script>
 		<script src="js/directives/todoFocus.js"></script>
 		<script src="js/directives/todoBlur.js"></script>
+		<script src="js/directives/todoEscape.js"></script>
 	</body>
 </html>

architecture-examples/angularjs/js/controllers/todoCtrl.js

@@ -1,4 +1,4 @@
-/*global todomvc */
+/*global todomvc, angular */
 'use strict';
 
 /**
@@ -47,6 +47,8 @@ todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage,
 
 	$scope.editTodo = function (todo) {
 		$scope.editedTodo = todo;
+		// Clone the original todo to restore it on demand.
+		$scope.originalTodo = angular.extend({}, todo);
 	};
 
 	$scope.doneEditing = function (todo) {
@@ -58,6 +60,11 @@ todomvc.controller('TodoCtrl', function TodoCtrl($scope, $location, todoStorage,
 		}
 	};
 
+	$scope.revertEditing = function (todo) {
+		todos[todos.indexOf(todo)] = $scope.originalTodo;
+		$scope.doneEditing($scope.originalTodo);
+	};
+
 	$scope.removeTodo = function (todo) {
 		todos.splice(todos.indexOf(todo), 1);
 	};

architecture-examples/angularjs/js/directives/todoEscape.js

@@ -0,0 +1,18 @@
+/*global todomvc */
+'use strict';
+
+/**
+ * Directive that executes an expression when the element it is applied to gets
+ * an `escape` keydown event.
+ */
+todomvc.directive('todoBlur', function () {
+	var ESCAPE_KEY = 27;
+	return function (scope, elem, attrs) {
+		elem.bind('keydown', function (event) {
+			if (event.keyCode === ESCAPE_KEY) {
+				scope.$apply(attrs.todoEscape);
+			}
+		});
+	};
+});
+

architecture-examples/angularjs/test/unit/todoCtrlSpec.js

@@ -172,6 +172,15 @@
 				scope.$digest();
 				expect(scope.completedCount).toBe(5);
 			});
+
+			it('revertTodo() get a Todo to its previous state', function () {
+				var todo = todoList[0];
+				scope.editTodo(todo);
+				todo.title = 'Unicorn sparkly skypuffles.';
+				scope.revertEditing(todo);
+				scope.$digest();
+				expect(scope.todos[0].title).toBe('Uncompleted Item 0');
+			});
 		});
 	});
 }());