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

Fixes #16797
angular · Jan 10, 2019 · dd33e9e · dd33e9e
1 parent be45d3c
commit dd33e9e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 1 deletion.
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;