honeymoose
/
angular-cn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(core): made directives shadow native element properties 

BREAKING CHANGE
    Previously, if an element had a property, Angular would update that property even if there was a directive placed on the same element with the same property. Now, the directive would have to explicitly update the native elmement by either using hostProperties or the renderer.
This commit is contained in:
vsavkin 2015-07-30 17:58:56 -07:00
parent 3c58878b19
commit 3437d56904
3 changed files with 109 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
modules/angular2/src/render/dom/view/proto_view_builder.ts
View File

@ -330,20 +330,27 @@ const STYLE_PREFIX = 'style';
function buildElementPropertyBindings(
schemaRegistry: ElementSchemaRegistry, protoElement: /*element*/ any, isNgComponent: boolean,
bindingsInTemplate: Map<string, ASTWithSource>, directiveTempaltePropertyNames: Set<string>):
bindingsInTemplate: Map<string, ASTWithSource>, directiveTemplatePropertyNames: Set<string>):
List<api.ElementPropertyBinding> {
var propertyBindings = [];
MapWrapper.forEach(bindingsInTemplate, (ast, propertyNameInTemplate) => {
var propertyBinding = createElementPropertyBinding(schemaRegistry, ast, propertyNameInTemplate);
if (isValidElementPropertyBinding(schemaRegistry, protoElement, isNgComponent,
propertyBinding)) {
if (isPresent(directiveTemplatePropertyNames) &&
SetWrapper.has(directiveTemplatePropertyNames, propertyNameInTemplate)) {
// We do nothing because directives shadow native elements properties.
} else if (isValidElementPropertyBinding(schemaRegistry, protoElement, isNgComponent,
propertyBinding)) {
propertyBindings.push(propertyBinding);
} else if (!isPresent(directiveTempaltePropertyNames) ||
!SetWrapper.has(directiveTempaltePropertyNames, propertyNameInTemplate)) {
// directiveTempaltePropertyNames is null for host property bindings
} else {
var exMsg =
`Can't bind to '${propertyNameInTemplate}' since it isn't a known property of the '<${DOM.tagName(protoElement).toLowerCase()}>' element`;
if (isPresent(directiveTempaltePropertyNames)) {
// directiveTemplatePropertyNames is null for host property bindings
if (isPresent(directiveTemplatePropertyNames)) {
exMsg += ' and there are no matching directives with a corresponding property';
}
throw new BaseException(exMsg);

58
modules/angular2/test/core/compiler/integration_spec.ts
View File

@ -31,6 +31,7 @@ import {
isJsObject,
global,
stringify,
isBlank,
CONST,
CONST_EXPR
} from 'angular2/src/facade/lang';
@ -1359,8 +1360,8 @@ export function main() {
});
}));
if (!IS_DARTIUM) {
describe('Missing property bindings', () => {
describe('Property bindings', () => {
if (!IS_DARTIUM) {
it('should throw on bindings to unknown properties',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder,
async) => {
@ -1386,8 +1387,47 @@ export function main() {
.createAsync(MyComp)
.then((val) => { async.done(); });
}));
});
}
}
it('should not be created when there is a directive with the same property',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new viewAnn.View({
template: '<span [title]="ctxProp"></span>',
directives: [DirectiveWithTitle]
}))
.createAsync(MyComp)
.then((rootTC) => {
rootTC.componentInstance.ctxProp = "TITLE";
rootTC.detectChanges();
var el = DOM.querySelector(rootTC.nativeElement, "span");
expect(isBlank(el.title) || el.title == '').toBeTruthy();
async.done();
});
}));
it('should work when a directive uses hostProperty to update the DOM element',
inject([TestComponentBuilder, AsyncTestCompleter], (tcb: TestComponentBuilder, async) => {
tcb.overrideView(MyComp, new viewAnn.View({
template: '<span [title]="ctxProp"></span>',
directives: [DirectiveWithTitleAndHostProperty]
}))
.createAsync(MyComp)
.then((rootTC) => {
rootTC.componentInstance.ctxProp = "TITLE";
rootTC.detectChanges();
var el = DOM.querySelector(rootTC.nativeElement, "span");
expect(el.title).toEqual("TITLE");
async.done();
});
}));
});
describe('different proto view storages', () => {
function runWithMode(mode: string) {
@ -1505,6 +1545,16 @@ class MyDir {
constructor() { this.dirProp = ''; }
}
@Directive({selector: '[title]', properties: ['title']})
class DirectiveWithTitle {
title: string;
}
@Directive({selector: '[title]', properties: ['title'], host: {'[title]': 'title'}})
class DirectiveWithTitleAndHostProperty {
title: string;
}
@Component({selector: 'push-cmp', properties: ['prop'], changeDetection: ON_PUSH})
@View({template: '{{field}}'})
@Injectable()

71
modules/angular2/test/render/dom/view/proto_view_builder_spec.ts
View File

@ -104,42 +104,53 @@ export function main() {
var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
expect(pv.elementBinders[0].propertyBindings[0].property).toEqual('readOnly');
});
});
describe('property binding types', () => {
it('should detect property names', () => {
builder.bindElement(el('<div/>')).bindProperty('tabindex', emptyExpr());
var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.PROPERTY);
describe('property binding', () => {
describe('types', () => {
it('should detect property names', () => {
builder.bindElement(el('<div/>')).bindProperty('tabindex', emptyExpr());
var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
expect(pv.elementBinders[0].propertyBindings[0].type)
.toEqual(PropertyBindingType.PROPERTY);
});
it('should detect attribute names', () => {
builder.bindElement(el('<div/>')).bindProperty('attr.someName', emptyExpr());
var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
expect(pv.elementBinders[0].propertyBindings[0].type)
.toEqual(PropertyBindingType.ATTRIBUTE);
});
it('should detect class names', () => {
builder.bindElement(el('<div/>')).bindProperty('class.someName', emptyExpr());
var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.CLASS);
});
it('should detect style names', () => {
builder.bindElement(el('<div/>')).bindProperty('style.someName', emptyExpr());
var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.STYLE);
});
it('should detect style units', () => {
builder.bindElement(el('<div/>')).bindProperty('style.someName.someUnit', emptyExpr());
var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
expect(pv.elementBinders[0].propertyBindings[0].unit).toEqual('someUnit');
});
});
it('should detect attribute names', () => {
builder.bindElement(el('<div/>')).bindProperty('attr.someName', emptyExpr());
var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
expect(pv.elementBinders[0].propertyBindings[0].type)
.toEqual(PropertyBindingType.ATTRIBUTE);
});
it('should not create a property binding when there is already same directive property binding',
() => {
var binder = builder.bindElement(el('<div/>'));
it('should detect class names', () => {
builder.bindElement(el('<div/>')).bindProperty('class.someName', emptyExpr());
var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.CLASS);
});
binder.bindProperty('tabindex', emptyExpr());
binder.bindDirective(0).bindProperty('tabindex', emptyExpr(), 'tabindex');
it('should detect style names', () => {
builder.bindElement(el('<div/>')).bindProperty('style.someName', emptyExpr());
var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
expect(pv.elementBinders[0].propertyBindings[0].type).toEqual(PropertyBindingType.STYLE);
});
it('should detect style units', () => {
builder.bindElement(el('<div/>')).bindProperty('style.someName.someUnit', emptyExpr());
var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
expect(pv.elementBinders[0].propertyBindings[0].unit).toEqual('someUnit');
});
var pv = builder.build(new DomElementSchemaRegistry(), templateCloner);
expect(pv.elementBinders[0].propertyBindings.length).toEqual(0);
});
});
});
}