Skip to content
This repository has been archived by the owner on Feb 22, 2018. It is now read-only.

feat(ng-model-options) Added ng-model-options #974

Closed
wants to merge 7 commits into from
Closed

feat(ng-model-options) Added ng-model-options #974

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fcfc248
Added ng-model-options support
jrote1 Apr 28, 2014
c1a2cc4
feat(ng-model-options) Added ng-model-options
jrote1 Apr 28, 2014
82dd42d
Fixed some more issues
jrote1 Apr 28, 2014
68e21a6
Fixed some more issues
jrote1 Apr 28, 2014
308d8dc
Fixed some formatting
jrote1 Apr 28, 2014
e706b93
Fixed some formatting
jrote1 Apr 28, 2014
ac37d3e
Merged
jrote1 May 7, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion benchmark/pubspec.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ packages:
barback:
description: barback
source: hosted
version: "0.13.0"
version: "0.12.0"
benchmark_harness:
description: benchmark_harness
source: hosted
Expand Down
2 changes: 1 addition & 1 deletion example/pubspec.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ packages:
barback:
description: barback
source: hosted
version: "0.13.0"
version: "0.12.0"
browser:
description: browser
source: hosted
Expand Down
2 changes: 1 addition & 1 deletion example/web/hello_world.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<body hello-world-controller>

<h3>Hello {{ctrl.name}}!</h3>
name: <input type="text" ng-model="ctrl.name">
name: <input type="text" ng-model="ctrl.name" ng-model-options="{ debounce: {'default': 500, 'blur': 0} }">

<script type="application/dart" src="hello_world.dart"></script>
<script src="packages/browser/dart.js"></script>
Expand Down
4 changes: 4 additions & 0 deletions lib/directive/module.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,8 @@ library angular.directive;

import 'package:di/di.dart';
import 'dart:html' as dom;
import 'dart:convert' as convert;
import 'dart:async' as async;
import 'package:intl/intl.dart';
import 'package:angular/core/annotation.dart';
import 'package:angular/core/module_internal.dart';
Expand Down Expand Up @@ -51,6 +53,7 @@ part 'ng_non_bindable.dart';
part 'ng_model_select.dart';
part 'ng_form.dart';
part 'ng_model_validators.dart';
part 'ng_model_options.dart';

class DecoratorFormatter extends Module {
DecoratorFormatter() {
Expand Down Expand Up @@ -82,6 +85,7 @@ class DecoratorFormatter extends Module {
value(ContentEditable, null);
value(NgBindTypeForDateLike, null);
value(NgModel, null);
value(NgModelOptions, null);
value(NgValue, null);
value(NgTrueValue, new NgTrueValue());
value(NgFalseValue, new NgFalseValue());
Expand Down
81 changes: 47 additions & 34 deletions lib/directive/ng_model.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -148,8 +148,7 @@ class NgModel extends NgControl implements AttachAware {
onChange(changeRecord is CollectionChangeRecord
? changeRecord.iterable
: changeRecord);
},
collection: true);
}, collection: true);
} else if (_expression != null) {
_watch = _scope.watch(_expression, onChange);
}
Expand Down Expand Up @@ -196,7 +195,7 @@ class NgModel extends NgControl implements AttachAware {

get viewValue => _viewValue;
void set viewValue(value) {
_viewValue = value;
_viewValue = value;
Copy link
Contributor

Choose a reason for hiding this comment

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

revert

modelValue = value;
}

Expand Down Expand Up @@ -294,26 +293,29 @@ class InputCheckbox {
final NgModel ngModel;
final NgTrueValue ngTrueValue;
final NgFalseValue ngFalseValue;
final NgModelOptions ngModelOptions;
final Scope scope;

InputCheckbox(dom.Element this.inputElement, this.ngModel,
this.scope, this.ngTrueValue, this.ngFalseValue) {
this.scope, this.ngTrueValue, this.ngFalseValue, this.ngModelOptions) {
ngModel.render = (value) {
scope.rootScope.domWrite(() {
inputElement.checked = ngTrueValue.isValue(value);
});
};
inputElement
..onChange.listen((_) {
ngModel.viewValue = inputElement.checked
? ngTrueValue.value : ngFalseValue.value;
})
..onBlur.listen((e) {
..onChange.listen((_) => ngModelOptions.executeChangeFunc(() {
ngModel.viewValue = inputElement.checked ? ngTrueValue.value : ngFalseValue.value;
}))
..onBlur.listen((_) => ngModelOptions.executeBlurFunc(() {
ngModel.markAsTouched();
});
}));
}
}




/**
* Usage:
*
Expand All @@ -336,37 +338,42 @@ class InputCheckbox {
class InputTextLike {
final dom.Element inputElement;
final NgModel ngModel;
final NgModelOptions ngModelOptions;
final Scope scope;
String _inputType;


get typedValue => (inputElement as dynamic).value;
void set typedValue(value) {
(inputElement as dynamic).value = (value == null) ? '' : value.toString();
}

InputTextLike(this.inputElement, this.ngModel, this.scope) {
InputTextLike(this.inputElement, this.ngModel, this.scope, this.ngModelOptions) {
ngModel.render = (value) {
scope.rootScope.domWrite(() {
if (value == null) value = '';

var currentValue = typedValue;
if (value != currentValue && !(value is num && currentValue is num &&
value.isNaN && currentValue.isNaN)) {
typedValue = value;
typedValue = value;
}
});
};

inputElement
..onChange.listen(processValue)
..onInput.listen(processValue)
..onBlur.listen((e) {
..onChange.listen((event) => ngModelOptions.executeChangeFunc(() => processValue(event)))
..onInput.listen((event) => ngModelOptions.executeInputFunc(() => processValue(event)))
..onBlur.listen((_) => ngModelOptions.executeBlurFunc(() => () {
ngModel.markAsTouched();
});
}));
}

void processValue([_]) {
var value = typedValue;

if (value != ngModel.viewValue) ngModel.viewValue = value;

ngModel.validate();
}
}
Expand All @@ -393,6 +400,7 @@ class InputTextLike {
class InputNumberLike {
final dom.InputElement inputElement;
final NgModel ngModel;
final NgModelOptions ngModelOptions;
final Scope scope;


Expand All @@ -413,21 +421,20 @@ class InputNumberLike {
}
}

InputNumberLike(dom.Element this.inputElement, this.ngModel, this.scope) {
InputNumberLike(dom.Element this.inputElement, this.ngModel, this.scope, this.ngModelOptions) {
ngModel.render = (value) {
scope.rootScope.domWrite(() {
if (value != typedValue
&& (value == null || value is num && !value.isNaN)) {
if (value != typedValue && (value == null || value is num && !value.isNaN)) {
typedValue = value;
}
});
};
inputElement
..onChange.listen(relaxFnArgs(processValue))
..onInput.listen(relaxFnArgs(processValue))
..onBlur.listen((e) {
..onChange.listen((event) => ngModelOptions.executeChangeFunc(() => processValue()))
..onInput.listen((event) => ngModelOptions.executeInputFunc(() => processValue()))
..onBlur.listen((event) => ngModelOptions.executeBlurFunc(() => () {
ngModel.markAsTouched();
});
}));
}

void processValue() {
Expand Down Expand Up @@ -483,9 +490,12 @@ class NgBindTypeForDateLike {

dynamic get inputTypedValue {
switch (idlAttrKind) {
case DATE: return inputValueAsDate;
case NUMBER: return inputElement.valueAsNumber;
default: return inputElement.value;
case DATE:
return inputValueAsDate;
case NUMBER:
return inputElement.valueAsNumber;
default:
return inputElement.value;
}
}

Expand Down Expand Up @@ -585,11 +595,12 @@ class InputDateLike {
(Injector i) => new NgBindTypeForDateLike(i.get(dom.Element)));
final dom.InputElement inputElement;
final NgModel ngModel;
final NgModelOptions ngModelOptions;
final Scope scope;
NgBindTypeForDateLike ngBindType;

InputDateLike(dom.Element this.inputElement, this.ngModel, this.scope,
this.ngBindType) {
this.ngBindType, this.ngModelOptions) {
if (inputElement.type == 'datetime-local') {
ngBindType.idlAttrKind = NgBindTypeForDateLike.NUMBER;
}
Expand All @@ -599,11 +610,11 @@ class InputDateLike {
});
};
inputElement
..onChange.listen(relaxFnArgs(processValue))
..onInput.listen(relaxFnArgs(processValue))
..onBlur.listen((e) {
..onChange.listen((event) => ngModelOptions.executeChangeFunc(() => processValue()))
..onInput.listen((event) => ngModelOptions.executeInputFunc(() => processValue()))
..onBlur.listen((_) => ngModelOptions.executeBlurFunc(() => () {
ngModel.markAsTouched();
});
}));
}

dynamic get typedValue => ngBindType.inputTypedValue;
Expand Down Expand Up @@ -679,7 +690,9 @@ class NgValue {
NgValue(this.element);

@NgOneWay('ng-value')
void set value(val) { this._value = val; }
void set value(val) {
this._value = val;
}
dynamic get value => _value == null ? (element as dynamic).value : _value;
}

Expand Down Expand Up @@ -784,8 +797,8 @@ class InputRadio {
*/
@Decorator(selector: '[contenteditable][ng-model]')
class ContentEditable extends InputTextLike {
ContentEditable(dom.Element inputElement, NgModel ngModel, Scope scope)
: super(inputElement, ngModel, scope);
ContentEditable(dom.Element inputElement, NgModel ngModel, Scope scope, NgModelOptions modelOptions)
: super(inputElement, ngModel, scope, modelOptions);

// The implementation is identical to InputTextLike but use innerHtml instead of value
String get typedValue => (inputElement as dynamic).innerHtml;
Expand Down
54 changes: 54 additions & 0 deletions lib/directive/ng_model_options.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
part of angular.directive;

@Decorator(selector: 'input[ng-model-options]')
Copy link
Contributor

Choose a reason for hiding this comment

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

Some doc about the purpose of this class would be great!

class NgModelOptions {
int _debounceDefaultValue = 0;
int _debounceBlurValue;
int _debounceChangeValue;
int _debounceInputValue;

static const String _DEBOUNCE_DEFAULT_KEY = "default";
static const String _DEBOUNCE_BLUR_KEY = "blur";
static const String _DEBOUNCE_CHANGE_KEY = "change";
static const String _DEBOUNCE_INPUT_KEY = "input";

NgModelOptions(NodeAttrs attrs) {
Map options = convert.JSON.decode(attrs["ng-model-options"].replaceFirst("debounce", "'debounce'").replaceAll("'", "\""));
Copy link
Contributor

Choose a reason for hiding this comment

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

shouldn't we just have valid JSON as input ?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

only thing i was trying to achieve to match the angularjs spec

Copy link
Contributor

Choose a reason for hiding this comment

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

actually you should check how this is done in ng_pluralize.dart IMO

Copy link
Contributor

Choose a reason for hiding this comment

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

the comment has been removed: please check ng-pluralize

Copy link
Contributor Author

Choose a reason for hiding this comment

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

what should i check ng-pluralize for?

Copy link
Contributor

Choose a reason for hiding this comment

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

Some attributes have a JSON format

On 04/29/2014 01:21 AM, jrote1 wrote:

In lib/directive/ng_model_options.dart:

+part of angular.directive;
+
+@decorator(selector: 'input[ng-model-options]')
+class NgModelOptions {

  • int _debounceDefaultValue = 0;
  • int _debounceBlurValue;
  • int _debounceChangeValue;
  • int _debounceInputValue;
  • static const String _DEBOUNCE_DEFAULT_KEY = "default";
  • static const String _DEBOUNCE_BLUR_KEY = "blur";
  • static const String _DEBOUNCE_CHANGE_KEY = "change";
  • static const String _DEBOUNCE_INPUT_KEY = "input";
  • NgModelOptions(NodeAttrs attrs) {
  • Map options = convert.JSON.decode(attrs["ng-model-options"].replaceFirst("debounce", "'debounce'").replaceAll("'", """));

what should i check ng-pluralize for?

—
Reply to this email directly or view it on GitHub
https://github.com/angular/angular.dart/pull/974/files#r12073468.


if (options["debounce"].containsKey(_DEBOUNCE_DEFAULT_KEY)){
Copy link
Contributor

Choose a reason for hiding this comment

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

missing ws

_debounceDefaultValue = options["debounce"][_DEBOUNCE_DEFAULT_KEY];
}
_debounceBlurValue = options["debounce"][_DEBOUNCE_BLUR_KEY];
_debounceChangeValue = options["debounce"][_DEBOUNCE_CHANGE_KEY];
_debounceInputValue = options["debounce"][_DEBOUNCE_INPUT_KEY];
}

async.Timer _blurTimer;
void executeBlurFunc(func()) {
var delay = _debounceBlurValue == null ? _debounceDefaultValue : _debounceBlurValue;
_blurTimer = _runFuncDebounced(delay, func,_blurTimer);
Copy link
Contributor

Choose a reason for hiding this comment

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

", "

Copy link
Contributor Author

Choose a reason for hiding this comment

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

done

}

async.Timer _changeTimer;
Copy link
Contributor

Choose a reason for hiding this comment

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

pls move properties at the top of the class, before methods

void executeChangeFunc(func()) {
var delay = _debounceChangeValue == null ? _debounceDefaultValue : _debounceChangeValue;
_changeTimer = _runFuncDebounced(delay, func, _changeTimer);
}

async.Timer _inputTimer;
void executeInputFunc(func()) {
var delay = _debounceInputValue == null ? _debounceDefaultValue : _debounceInputValue;
_inputTimer = _runFuncDebounced(delay, func, _inputTimer);
}

async.Timer _runFuncDebounced(int delay, func(), async.Timer timer){
if (timer != null && timer.isActive) timer.cancel();

if(delay == 0){
Copy link
Contributor

Choose a reason for hiding this comment

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

if () {
} else {
}

notice ws & formatting

func();
Copy link
Contributor

Choose a reason for hiding this comment

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

add missing {}

return null;
} else {
return new async.Timer(new Duration(milliseconds: delay), func);
}
}
}
2 changes: 1 addition & 1 deletion pubspec.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ packages:
barback:
description: barback
source: hosted
version: "0.13.0"
version: "0.12.0"
benchmark_harness:
description: benchmark_harness
source: hosted
Expand Down
Loading