Skip to content
This repository has been archived by the owner on Apr 12, 2024. It is now read-only.

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

Merged
merged 1 commit into from Jan 11, 2019
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/ng/compile.js
View file
Open in desktop
Expand Up @@ -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);
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

$element can only ever have 1 element at this point, right? 😟

}

applyPropValue();
Expand Down
42 changes: 42 additions & 0 deletions test/ng/ngPropSpec.js
View file
Open in desktop
Expand Up @@ -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();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As I like to say, you can make these shorter with: $rootScope.$apply('text = ...') 😁

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;
Expand Down