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

jbedard · Jason Bedard · commit 772440cdaf9a · 2019-01-11T10:04:26.000-08:00
Fixes #16797 Closes #16798
diff --git a/src/ng/compile.js b/src/ng/compile.js
@@ -3837,7 +3837,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {
             pre: function ngPropPreLinkFn(scope, $element) {
               function applyPropValue() {
                 var propValue = ngPropGetter(scope);
-                $element.prop(propName, sanitizer(propValue));
+                $element[0][propName] = sanitizer(propValue);
               }
 
               applyPropValue();
diff --git a/test/ng/ngPropSpec.js b/test/ng/ngPropSpec.js
@@ -49,6 +49,48 @@ 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);
+    // Initialize to truthy value
+    $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 directly map special properties (class)', inject(function($rootScope, $compile) {
+    var element = $compile('<span ng-prop-class="myText" />')($rootScope);
+    $rootScope.myText = 'abc';
+    $rootScope.$digest();
+    expect(element[0].class).toBe('abc');
+    expect(element).not.toHaveClass('abc');
+  }));
+
+  it('should not use jQuery .prop() to avoid jQuery propFix/hooks', inject(function($rootScope, $compile) {
+    var element = $compile('<span ng-prop-class="myText" />')($rootScope);
+    spyOn(jqLite.prototype, 'prop');
+    $rootScope.myText = 'abc';
+    $rootScope.$digest();
+    expect(jqLite.prototype.prop).not.toHaveBeenCalled();
+  }));
+
   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;

Original file line number	Diff line number	Diff line change
`@@ -3837,7 +3837,7 @@ function $CompileProvider($provide, $$sanitizeUriProvider) {`
`3837`	`3837`	`pre: function ngPropPreLinkFn(scope, $element) {`
`3838`	`3838`	`function applyPropValue() {`
`3839`	`3839`	`var propValue = ngPropGetter(scope);`
`3840`		`- $element.prop(propName, sanitizer(propValue));`
	`3840`	`+ $element[0][propName] = sanitizer(propValue);`
`3841`	`3841`	`}`
`3842`	`3842`
`3843`	`3843`	`applyPropValue();`