Merge pull request #153 from angular-ui/issue149

Fixes for the reset issue #149

modules/directives/reset/reset.js

@@ -1,18 +1,21 @@
-
 /**
  * Add a clear button to form inputs to reset their value
  */
-angular.module('ui.directives').directive('uiReset', ['$parse', function($parse) {
+angular.module('ui.directives').directive('uiReset', ['$parse', function ($parse) {
   return {
     require:'ngModel',
-    link: function(scope, elm, attrs, ctrl) {
-  		elm.wrap('<span class="ui-resetwrap" />').after('<a class="ui-reset" />').next().click(function(e){
-  			e.preventDefault();
-  			scope.$apply(function(){
-    			// This lets you SET the value of the 'parsed' model
-    			ctrl.$setViewValue(null);
-  			});
-  		});
-  	}
+    link:function (scope, elm, attrs, ctrl) {
+      var aElement = angular.element('<a class="ui-reset" />');
+      elm.wrap('<span class="ui-resetwrap" />').after(aElement);
+
+      aElement.bind('click', function (e) {
+        e.preventDefault();
+        scope.$apply(function () {
+          // This lets you SET the value of the 'parsed' model
+          ctrl.$setViewValue(null);
+          ctrl.$render();
+        });
+      });
+    }
   };
 }]);

modules/directives/reset/test/resetSpec.js

@@ -1,41 +1,44 @@
 /*global describe, beforeEach, module, inject, it, spyOn, expect, $ */
 describe('uiReset', function () {
-    'use strict';
+  'use strict';
 
-    var scope, $compile;
-    beforeEach(module('ui.directives'));
-    beforeEach(inject(function (_$rootScope_, _$compile_, _$window_) {
-        scope = _$rootScope_.$new();
-        $compile = _$compile_;
-    }));
+  var scope, $compile;
+  beforeEach(module('ui.directives'));
+  beforeEach(inject(function (_$rootScope_, _$compile_, _$window_) {
+    scope = _$rootScope_.$new();
+    $compile = _$compile_;
+  }));
 
-    describe('compiling this directive', function() {
-        it('should throw an error if we have no model defined', function() {
-            function compile() {
-                $compile('<input type="text" ui-reset/>')(scope);
-            }
-            expect(compile).toThrow();
-        });
-        it('should insert some crap into the DOM', function() {
-            scope.foo = 'bar';
-            scope.$apply();
-            var element = $compile('<input type="text" ui-reset ng-model="foo"/>')(scope);
-            expect(element.parent().is('span')).toBe(true);
-        });
+  describe('compiling this directive', function () {
+    it('should throw an error if we have no model defined', function () {
+      function compile() {
+        $compile('<input type="text" ui-reset/>')(scope);
+      }
+      expect(compile).toThrow();
     });
-    describe('clicking on the created anchor tag', function() {
-        it('should prevent the default action', function() {
-            var element = $compile('<input type="text" ui-reset ng-model="foo"/>')(scope);
-            spyOn($.Event.prototype, 'preventDefault');
-            element.siblings().get(0).click();
-            expect($.Event.prototype.preventDefault).toHaveBeenCalled();
-        });
-        it('should clear the model', function() {
-            scope.foo = 'bar';
-            scope.$apply();
-            var element = $compile('<input type="text" ui-reset ng-model="foo"/>')(scope);
-            element.siblings().get(0).click();
-            expect(scope.foo).toBe(null);
-        });
+    it('should proper DOM structure', function () {
+      scope.foo = 'bar';
+      scope.$digest();
+      var element = $compile('<input type="text" ui-reset ng-model="foo"/>')(scope);
+      expect(element.parent().is('span')).toBe(true);
+      expect(element.next().is('a')).toBe(true);
     });
+  });
+  describe('clicking on the created anchor tag', function () {
+    it('should prevent the default action', function () {
+      var element = $compile('<input type="text" ui-reset ng-model="foo"/>')(scope);
+      spyOn($.Event.prototype, 'preventDefault');
+      element.siblings().get(0).click();
+      expect($.Event.prototype.preventDefault).toHaveBeenCalled();
+    });
+    it('should clear the model and control value', function () {
+      scope.foo = 'bar';
+      var element = $compile('<input type="text" ui-reset ng-model="foo"/>')(scope);
+      scope.$digest();
+      expect(element.val()).toBe('bar');
+      element.next().click();
+      expect(scope.foo).toBe(null);
+      expect(element.val()).toBe('');
+    });
+  });
 });