fix($compile): fix ng-prop-* with undefined values

Fixes angular#16797
jbedard · Dec 22, 2018 · f9a9171 · f9a9171
1 parent 9ae51d7
commit f9a9171
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/src/ng/compile.js b/src/ng/compile.js
@@ -3836,8 +3836,13 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
           return {
             pre: function ngPropPreLinkFn(scope, $element) {
               function applyPropValue() {
-                var propValue = ngPropGetter(scope);
-                $element.prop(propName, sanitizer(propValue));
+                var propValue = sanitizer(ngPropGetter(scope));
+
+                if (propValue !== undefined) {
+                  $element.prop(propName, propValue);
+                } else {
+                  $element.removeProp(propName);
+                }
               }
 
               applyPropValue();

diff --git a/test/ng/ngPropSpec.js b/test/ng/ngPropSpec.js
@@ -49,6 +49,32 @@ describe('ngProp*', function() {
     expect(element.prop('asdf')).toBe(true);
   }));
 
+  // https://github.com/angular/angular.js/issues/16797
+  it('should support falsy property values', inject(function($rootScope, $compile) {
+    var element = $compile('<span ng-prop-text="myText" />')($rootScope);
+    // Initialze to non-falsey
+    $rootScope.myText = 'abc';
+    $rootScope.$digest();
+    expect(element.prop('text')).toBe('abc');
+
+    // Assert various falsey values get assigned to the property
+    $rootScope.myText = '';
+    $rootScope.$digest();
+    expect(element.prop('text')).toBe('');
+    $rootScope.myText = 0;
+    $rootScope.$digest();
+    expect(element.prop('text')).toBe(0);
+    $rootScope.myText = false;
+    $rootScope.$digest();
+    expect(element.prop('text')).toBe(false);
+    $rootScope.myText = undefined;
+    $rootScope.$digest();
+    expect(element.prop('text')).toBeUndefined();
+    $rootScope.myText = null;
+    $rootScope.$digest();
+    expect(element.prop('text')).toBe(null);
+  }));
+
   it('should support mixed case using underscore-separated names', inject(function($rootScope, $compile) {
     var element = $compile('<span ng-prop-a_bcd_e="value" />')($rootScope);
     $rootScope.value = 123;