feat(core): add ability to reflect DOM properties as attributes

By binding the token `DOM_REFLECT_PROPERTIES_AS_ATTRIBUTES` provided by 
the dom_renderer module to `true` in the root injector (i.e. bootstrap()), 
all elements whose properties are set by angular will be reflected as 
attributes with the prefix "ng-reflect-".

Fixes #2910
This commit is contained in:
Jeff Cross
2015-07-15 10:55:44 -07:00
parent 66ec4d1f5c
commit 903ff9047f
5 changed files with 77 additions and 5 deletions
@@ -19,6 +19,8 @@ import {DOM} from 'angular2/src/dom/dom_adapter';
import {DomTestbed, TestView, elRef} from './dom_testbed';
import {ViewDefinition, DirectiveMetadata, RenderViewRef} from 'angular2/src/render/api';
import {DOM_REFLECT_PROPERTIES_AS_ATTRIBUTES} from 'angular2/src/render/dom/dom_renderer';
import {bind} from 'angular2/di';
export function main() {
describe('DomRenderer integration', () => {
@@ -126,6 +128,50 @@ export function main() {
});
}));
it('should NOT reflect property values as attributes if flag is NOT set',
inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
tb.compileAll([
someComponent,
new ViewDefinition(
{componentId: 'someComponent', template: '<input [title]="y">', directives: []})
])
.then((protoViewDtos) => {
var rootView = tb.createRootView(protoViewDtos[0]);
var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);
var el = DOM.childNodes(tb.rootEl)[0];
tb.renderer.setElementProperty(elRef(cmpView.viewRef, 0), 'maxLength', '20');
expect(DOM.getAttribute(<HTMLInputElement>el, 'ng-reflect-max-length'))
.toEqual(null);
async.done();
});
}));
describe('reflection', () => {
beforeEachBindings(() => [bind(DOM_REFLECT_PROPERTIES_AS_ATTRIBUTES).toValue(true)]);
it('should reflect property values as attributes if flag is set',
inject([AsyncTestCompleter, DomTestbed], (async, tb) => {
tb.compileAll([
someComponent,
new ViewDefinition({
componentId: 'someComponent',
template: '<input [title]="y">',
directives: []
})
])
.then((protoViewDtos) => {
var rootView = tb.createRootView(protoViewDtos[0]);
var cmpView = tb.createComponentView(rootView.viewRef, 0, protoViewDtos[1]);
var el = DOM.childNodes(tb.rootEl)[0];
tb.renderer.setElementProperty(elRef(cmpView.viewRef, 0), 'maxLength', '20');
expect(DOM.getAttribute(<HTMLInputElement>el, 'ng-reflect-max-length'))
.toEqual('20');
async.done();
});
}));
});
if (DOM.supportsDOMEvents()) {
it('should call actions on the element independent of the compilation',
inject([AsyncTestCompleter, DomTestbed], (async, tb) => {