cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

16
modules/angular2/src/render/dom/dom_renderer.ts
View File

@ -18,19 +18,26 @@ import {DomProtoView, DomProtoViewRef, resolveInternalDomProtoView} from './view
import {DomView, DomViewRef, resolveInternalDomView} from './view/view';
import {DomElement} from './view/element';
import {DomViewContainer} from './view/view_container';
import {NG_BINDING_CLASS_SELECTOR, NG_BINDING_CLASS} from './util';
import {NG_BINDING_CLASS_SELECTOR, NG_BINDING_CLASS, camelCaseToDashCase} from './util';
import {Renderer, RenderProtoViewRef, RenderViewRef, RenderElementRef} from '../api';
export const DOCUMENT_TOKEN = CONST_EXPR(new OpaqueToken('DocumentToken'));
export const DOM_REFLECT_PROPERTIES_AS_ATTRIBUTES =
CONST_EXPR(new OpaqueToken('DomReflectPropertiesAsAttributes'));
const REFLECT_PREFIX = 'ng-reflect-';
@Injectable()
export class DomRenderer extends Renderer {
_document;
_reflectPropertiesAsAttributes: boolean;
constructor(public _eventManager: EventManager, public _shadowDomStrategy: ShadowDomStrategy,
@Inject(DOCUMENT_TOKEN) document) {
@Inject(DOCUMENT_TOKEN) document,
@Inject(DOM_REFLECT_PROPERTIES_AS_ATTRIBUTES) reflectPropertiesAsAttributes:
boolean) {
super();
this._reflectPropertiesAsAttributes = reflectPropertiesAsAttributes;
this._document = document;
}
@ -186,6 +193,11 @@ export class DomRenderer extends Renderer {
setElementProperty(location: RenderElementRef, propertyName: string, propertyValue: any): void {
var view = resolveInternalDomView(location.renderView);
view.setElementProperty(location.boundElementIndex, propertyName, propertyValue);
// Reflect the property value as an attribute value with ng-reflect- prefix.
if (this._reflectPropertiesAsAttributes) {
this.setElementAttribute(location, `${REFLECT_PREFIX}${camelCaseToDashCase(propertyName)}`,
propertyValue);
}
}
setElementAttribute(location: RenderElementRef, attributeName: string, attributeValue: string):