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

feat(Directive): Have a single Directive.host which mimics HTML

Browse Source 
fixes #2268

BREAKING CHANGE:

Before

    @Directive({
      hostListeners: {'event': 'statement'},
      hostProperties: {'expression': 'hostProp'},
      hostAttributes: {'attr': 'value'},
      hostActions: {'action': 'statement'}
    })

After

    @Directive({
      host: {
        '(event)': 'statement',
        '[hostProp]': 'expression'  // k & v swapped
        'attr': 'value',
        '@action': 'statement'
      }
    })
This commit is contained in:
Victor Berchet
2015-06-09 12:33:40 +02:00
committed by Tobias Bosch
parent 47b6b05017
commit f3b49378e4
32 changed files with 316 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
modules/angular2/src/forms/directives/checkbox_value_accessor.ts
View File

@ -16,15 +16,16 @@ import {ControlValueAccessor} from './control_value_accessor';
@Directive({
selector:
'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]',
hostListeners: {'change': 'onChange($event.target.checked)', 'blur': 'onTouched()'},
hostProperties: {
'checked': 'checked',
'cd.control?.untouched == true': 'class.ng-untouched',
'cd.control?.touched == true': 'class.ng-touched',
'cd.control?.pristine == true': 'class.ng-pristine',
'cd.control?.dirty == true': 'class.ng-dirty',
'cd.control?.valid == true': 'class.ng-valid',
'cd.control?.valid == false': 'class.ng-invalid'
host: {
'(change)': 'onChange($event.target.checked)',
'(blur)': 'onTouched()',
'[checked]': 'checked',
'[class.ng-untouched]': 'cd.control?.untouched == true',
'[class.ng-touched]': 'cd.control?.touched == true',
'[class.ng-pristine]': 'cd.control?.pristine == true',
'[class.ng-dirty]': 'cd.control?.dirty == true',
'[class.ng-valid]': 'cd.control?.valid == true',
'[class.ng-invalid]': 'cd.control?.valid == false'
}
})
export class CheckboxControlValueAccessor implements ControlValueAccessor {
@ -42,4 +43,4 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor {
registerOnChange(fn): void { this.onChange = fn; }
registerOnTouched(fn): void { this.onTouched = fn; }
}
}

26
modules/angular2/src/forms/directives/default_value_accessor.ts
View File

@ -19,19 +19,17 @@ import {isBlank} from 'angular2/src/facade/lang';
@Directive({
selector:
'input:not([type=checkbox])[ng-control],textarea[ng-control],input:not([type=checkbox])[ng-form-control],textarea[ng-form-control],input:not([type=checkbox])[ng-model],textarea[ng-model]',
hostListeners: {
'change': 'onChange($event.target.value)',
'input': 'onChange($event.target.value)',
'blur': 'onTouched()'
},
hostProperties: {
'value': 'value',
'cd.control?.untouched == true': 'class.ng-untouched',
'cd.control?.touched == true': 'class.ng-touched',
'cd.control?.pristine == true': 'class.ng-pristine',
'cd.control?.dirty == true': 'class.ng-dirty',
'cd.control?.valid == true': 'class.ng-valid',
'cd.control?.valid == false': 'class.ng-invalid'
host: {
'(change)': 'onChange($event.target.value)',
'(input)': 'onChange($event.target.value)',
'(blur)': 'onTouched()',
'[value]': 'value',
'[class.ng-untouched]': 'cd.control?.untouched == true',
'[class.ng-touched]': 'cd.control?.touched == true',
'[class.ng-pristine]': 'cd.control?.pristine == true',
'[class.ng-dirty]': 'cd.control?.dirty == true',
'[class.ng-valid]': 'cd.control?.valid == true',
'[class.ng-invalid]': 'cd.control?.valid == false'
}
})
export class DefaultValueAccessor implements ControlValueAccessor {
@ -50,4 +48,4 @@ export class DefaultValueAccessor implements ControlValueAccessor {
registerOnChange(fn): void { this.onChange = fn; }
registerOnTouched(fn): void { this.onTouched = fn; }
}
}

6
modules/angular2/src/forms/directives/form_model_directive.ts
View File

@ -60,8 +60,8 @@ const formDirectiveBinding = CONST_EXPR(
hostInjector: [formDirectiveBinding],
properties: ['form: ng-form-model'],
lifecycle: [onChange],
hostListeners: {
'submit': 'onSubmit()',
host: {
'(submit)': 'onSubmit()',
},
events: ['ngSubmit'],
exportAs: 'form'
@ -113,4 +113,4 @@ export class FormModelDirective extends ControlContainerDirective implements For
dir.valueAccessor.writeValue(c.value);
});
}
}
}

26
modules/angular2/src/forms/directives/select_control_value_accessor.ts
View File

@ -17,19 +17,17 @@ import {ControlValueAccessor} from './control_value_accessor';
*/
@Directive({
selector: 'select[ng-control],select[ng-form-control],select[ng-model]',
hostListeners: {
'change': 'onChange($event.target.value)',
'input': 'onChange($event.target.value)',
'blur': 'onTouched()'
},
hostProperties: {
'value': 'value',
'cd.control?.untouched == true': 'class.ng-untouched',
'cd.control?.touched == true': 'class.ng-touched',
'cd.control?.pristine == true': 'class.ng-pristine',
'cd.control?.dirty == true': 'class.ng-dirty',
'cd.control?.valid == true': 'class.ng-valid',
'cd.control?.valid == false': 'class.ng-invalid'
host: {
'(change)': 'onChange($event.target.value)',
'(input)': 'onChange($event.target.value)',
'(blur)': 'onTouched()',
'[value]': 'value',
'[class.ng-untouched]': 'cd.control?.untouched == true',
'[class.ng-touched]': 'cd.control?.touched == true',
'[class.ng-pristine]': 'cd.control?.pristine == true',
'[class.ng-dirty]': 'cd.control?.dirty == true',
'[class.ng-valid]': 'cd.control?.valid == true',
'[class.ng-invalid]': 'cd.control?.valid == false'
}
})
export class SelectControlValueAccessor implements ControlValueAccessor {
@ -48,4 +46,4 @@ export class SelectControlValueAccessor implements ControlValueAccessor {
registerOnChange(fn): void { this.onChange = fn; }
registerOnTouched(fn): void { this.onTouched = fn; }
}
}

4
modules/angular2/src/forms/directives/template_driven_form_directive.ts
View File

@ -16,8 +16,8 @@ const formDirectiveBinding = CONST_EXPR(new Binding(
@Directive({
selector: 'form:not([ng-no-form]):not([ng-form-model]),ng-form,[ng-form]',
hostInjector: [formDirectiveBinding],
hostListeners: {
'submit': 'onSubmit()',
host: {
'(submit)': 'onSubmit()',
},
events: ['ngSubmit'],
exportAs: 'form'