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

Commit 3faf59b

Browse files
jrote1mhevery
jrote1
authored and
mhevery
committed
feat(ng-model): Added ng-model-options
Added support for the debounce part of ng-model-options Closes #969 Closes #974
1 parent db04ce3 commit 3faf59b

File tree

7 files changed

+130
-45
lines changed

7 files changed

+130
-45
lines changed

Diff for: ‎example/web/hello_world.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<body hello-world-controller>
77

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

1111
<script type="application/dart" src="hello_world.dart"></script>
1212
<script src="packages/browser/dart.js"></script>

Diff for: ‎lib/core/annotation_src.dart

+2-5
Original file line numberDiff line numberDiff line change
@@ -547,11 +547,8 @@ abstract class DetachAware {
547547
}
548548

549549
/**
550-
* Use the @[Formatter] class annotation to register a new formatter.
551-
*
552-
* A formatter is a pure function that performs a transformation on input data from an expression.
553-
* For more on formatters in Angular, see the documentation for the
554-
* [angular:formatter](#angular-formatter) library.
550+
* Use @[Formatter] annotation to register a new formatter. A formatter is a class
551+
* with a [call] method (a callable function).
555552
*
556553
* Usage:
557554
*

Diff for: ‎lib/directive/module.dart

+5-1
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,8 @@ library angular.directive;
1919

2020
import 'package:di/di.dart';
2121
import 'dart:html' as dom;
22+
import 'dart:convert' as convert;
23+
import 'dart:async' as async;
2224
import 'package:intl/intl.dart';
2325
import 'package:angular/core/annotation.dart';
2426
import 'package:angular/core/module_internal.dart';
@@ -51,10 +53,11 @@ part 'ng_non_bindable.dart';
5153
part 'ng_model_select.dart';
5254
part 'ng_form.dart';
5355
part 'ng_model_validators.dart';
56+
part 'ng_model_options.dart';
5457

5558
class DecoratorFormatter extends Module {
5659
DecoratorFormatter() {
57-
bind(AHref, toValue: null);
60+
bind(AHref, toValue: null);
5861
bind(NgBaseCss); // The root injector should have an empty NgBaseCss
5962
bind(NgBind, toValue: null);
6063
bind(NgBindTemplate, toValue: null);
@@ -81,6 +84,7 @@ class DecoratorFormatter extends Module {
8184
bind(ContentEditable, toValue: null);
8285
bind(NgBindTypeForDateLike, toValue: null);
8386
bind(NgModel, toValue: null);
87+
bind(NgModelOptions, toValue: null);
8488
bind(NgValue, toValue: null);
8589
bind(NgTrueValue, toValue: new NgTrueValue());
8690
bind(NgFalseValue, toValue: new NgFalseValue());

Diff for: ‎lib/directive/ng_model.dart

+39-28
Original file line numberDiff line numberDiff line change
@@ -294,26 +294,29 @@ class InputCheckbox {
294294
final NgModel ngModel;
295295
final NgTrueValue ngTrueValue;
296296
final NgFalseValue ngFalseValue;
297+
final NgModelOptions ngModelOptions;
297298
final Scope scope;
298299

299300
InputCheckbox(dom.Element this.inputElement, this.ngModel,
300-
this.scope, this.ngTrueValue, this.ngFalseValue) {
301+
this.scope, this.ngTrueValue, this.ngFalseValue, this.ngModelOptions) {
301302
ngModel.render = (value) {
302303
scope.rootScope.domWrite(() {
303304
inputElement.checked = ngTrueValue.isValue(value);
304305
});
305306
};
306307
inputElement
307-
..onChange.listen((_) {
308-
ngModel.viewValue = inputElement.checked
309-
? ngTrueValue.value : ngFalseValue.value;
310-
})
311-
..onBlur.listen((e) {
308+
..onChange.listen((_) => ngModelOptions.executeChangeFunc(() {
309+
ngModel.viewValue = inputElement.checked ? ngTrueValue.value : ngFalseValue.value;
310+
}))
311+
..onBlur.listen((_) => ngModelOptions.executeBlurFunc(() {
312312
ngModel.markAsTouched();
313-
});
313+
}));
314314
}
315315
}
316316

317+
318+
319+
317320
/**
318321
* Usage:
319322
*
@@ -337,37 +340,42 @@ class InputCheckbox {
337340
class InputTextLike {
338341
final dom.Element inputElement;
339342
final NgModel ngModel;
343+
final NgModelOptions ngModelOptions;
340344
final Scope scope;
341345
String _inputType;
342346

347+
343348
get typedValue => (inputElement as dynamic).value;
344349
void set typedValue(value) {
345350
(inputElement as dynamic).value = (value == null) ? '' : value.toString();
346351
}
347352

348-
InputTextLike(this.inputElement, this.ngModel, this.scope) {
353+
InputTextLike(this.inputElement, this.ngModel, this.scope, this.ngModelOptions) {
349354
ngModel.render = (value) {
350355
scope.rootScope.domWrite(() {
351356
if (value == null) value = '';
352357

353358
var currentValue = typedValue;
354359
if (value != currentValue && !(value is num && currentValue is num &&
355360
value.isNaN && currentValue.isNaN)) {
356-
typedValue = value;
361+
typedValue = value;
357362
}
358363
});
359364
};
365+
360366
inputElement
361-
..onChange.listen(processValue)
362-
..onInput.listen(processValue)
363-
..onBlur.listen((e) {
367+
..onChange.listen((event) => ngModelOptions.executeChangeFunc(() => processValue(event)))
368+
..onInput.listen((event) => ngModelOptions.executeInputFunc(() => processValue(event)))
369+
..onBlur.listen((_) => ngModelOptions.executeBlurFunc(() => () {
364370
ngModel.markAsTouched();
365-
});
371+
}));
366372
}
367373

368374
void processValue([_]) {
369375
var value = typedValue;
376+
370377
if (value != ngModel.viewValue) ngModel.viewValue = value;
378+
371379
ngModel.validate();
372380
}
373381
}
@@ -394,6 +402,7 @@ class InputTextLike {
394402
class InputNumberLike {
395403
final dom.InputElement inputElement;
396404
final NgModel ngModel;
405+
final NgModelOptions ngModelOptions;
397406
final Scope scope;
398407

399408

@@ -414,21 +423,20 @@ class InputNumberLike {
414423
}
415424
}
416425

417-
InputNumberLike(dom.Element this.inputElement, this.ngModel, this.scope) {
426+
InputNumberLike(dom.Element this.inputElement, this.ngModel, this.scope, this.ngModelOptions) {
418427
ngModel.render = (value) {
419428
scope.rootScope.domWrite(() {
420-
if (value != typedValue
421-
&& (value == null || value is num && !value.isNaN)) {
429+
if (value != typedValue && (value == null || value is num && !value.isNaN)) {
422430
typedValue = value;
423431
}
424432
});
425433
};
426434
inputElement
427-
..onChange.listen(relaxFnArgs(processValue))
428-
..onInput.listen(relaxFnArgs(processValue))
429-
..onBlur.listen((e) {
435+
..onChange.listen((event) => ngModelOptions.executeChangeFunc(() => processValue()))
436+
..onInput.listen((event) => ngModelOptions.executeInputFunc(() => processValue()))
437+
..onBlur.listen((event) => ngModelOptions.executeBlurFunc(() => () {
430438
ngModel.markAsTouched();
431-
});
439+
}));
432440
}
433441

434442
void processValue() {
@@ -586,11 +594,12 @@ class InputDateLike {
586594
toFactory: (Injector i) => new NgBindTypeForDateLike(i.get(dom.Element)));
587595
final dom.InputElement inputElement;
588596
final NgModel ngModel;
597+
final NgModelOptions ngModelOptions;
589598
final Scope scope;
590599
NgBindTypeForDateLike ngBindType;
591600

592601
InputDateLike(dom.Element this.inputElement, this.ngModel, this.scope,
593-
this.ngBindType) {
602+
this.ngBindType, this.ngModelOptions) {
594603
if (inputElement.type == 'datetime-local') {
595604
ngBindType.idlAttrKind = NgBindTypeForDateLike.NUMBER;
596605
}
@@ -600,11 +609,11 @@ class InputDateLike {
600609
});
601610
};
602611
inputElement
603-
..onChange.listen(relaxFnArgs(processValue))
604-
..onInput.listen(relaxFnArgs(processValue))
605-
..onBlur.listen((e) {
612+
..onChange.listen((event) => ngModelOptions.executeChangeFunc(() => processValue()))
613+
..onInput.listen((event) => ngModelOptions.executeInputFunc(() => processValue()))
614+
..onBlur.listen((_) => ngModelOptions.executeBlurFunc(() => () {
606615
ngModel.markAsTouched();
607-
});
616+
}));
608617
}
609618

610619
dynamic get typedValue => ngBindType.inputTypedValue;
@@ -680,7 +689,9 @@ class NgValue {
680689
NgValue(this.element);
681690

682691
@NgOneWay('ng-value')
683-
void set value(val) { this._value = val; }
692+
void set value(val) {
693+
this._value = val;
694+
}
684695
dynamic get value => _value == null ? (element as dynamic).value : _value;
685696
}
686697

@@ -785,8 +796,8 @@ class InputRadio {
785796
*/
786797
@Decorator(selector: '[contenteditable][ng-model]')
787798
class ContentEditable extends InputTextLike {
788-
ContentEditable(dom.Element inputElement, NgModel ngModel, Scope scope)
789-
: super(inputElement, ngModel, scope);
799+
ContentEditable(dom.Element inputElement, NgModel ngModel, Scope scope, NgModelOptions modelOptions)
800+
: super(inputElement, ngModel, scope, modelOptions);
790801

791802
// The implementation is identical to InputTextLike but use innerHtml instead of value
792803
String get typedValue => (inputElement as dynamic).innerHtml;

Diff for: ‎lib/directive/ng_model_options.dart

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
part of angular.directive;
2+
3+
@Decorator(selector: 'input[ng-model-options]')
4+
class NgModelOptions {
5+
int _debounceDefaultValue = 0;
6+
int _debounceBlurValue;
7+
int _debounceChangeValue;
8+
int _debounceInputValue;
9+
10+
async.Timer _blurTimer;
11+
async.Timer _changeTimer;
12+
async.Timer _inputTimer;
13+
14+
static const String _DEBOUNCE_DEFAULT_KEY = "default";
15+
static const String _DEBOUNCE_BLUR_KEY = "blur";
16+
static const String _DEBOUNCE_CHANGE_KEY = "change";
17+
static const String _DEBOUNCE_INPUT_KEY = "input";
18+
19+
NgModelOptions(NodeAttrs attrs) {
20+
var jsonFormattedOptions = attrs["ng-model-options"].replaceFirst("debounce", "'debounce'")
21+
.replaceAll("'", "\"");
22+
Map options = convert.JSON.decode(jsonFormattedOptions);
23+
24+
if(options["debounce"] is int){
25+
_debounceDefaultValue = options["debounce"];
26+
}else{
27+
if (options["debounce"].containsKey(_DEBOUNCE_DEFAULT_KEY)){
28+
_debounceDefaultValue = options["debounce"][_DEBOUNCE_DEFAULT_KEY];
29+
}
30+
_debounceBlurValue = options["debounce"][_DEBOUNCE_BLUR_KEY];
31+
_debounceChangeValue = options["debounce"][_DEBOUNCE_CHANGE_KEY];
32+
_debounceInputValue = options["debounce"][_DEBOUNCE_INPUT_KEY];
33+
}
34+
}
35+
36+
37+
void executeBlurFunc(func()) {
38+
var delay = _debounceBlurValue == null ? _debounceDefaultValue : _debounceBlurValue;
39+
_blurTimer = _runFuncDebounced(delay, func, _blurTimer);
40+
}
41+
42+
void executeChangeFunc(func()) {
43+
var delay = _debounceChangeValue == null ? _debounceDefaultValue : _debounceChangeValue;
44+
_changeTimer = _runFuncDebounced(delay, func, _changeTimer);
45+
}
46+
47+
void executeInputFunc(func()) {
48+
var delay = _debounceInputValue == null ? _debounceDefaultValue : _debounceInputValue;
49+
_inputTimer = _runFuncDebounced(delay, func, _inputTimer);
50+
}
51+
52+
async.Timer _runFuncDebounced(int delay, func(), async.Timer timer){
53+
if (timer != null && timer.isActive) timer.cancel();
54+
55+
if(delay == 0){
56+
func();
57+
return null;
58+
} else {
59+
return new async.Timer(new Duration(milliseconds: delay), func);
60+
}
61+
}
62+
}

Diff for: ‎test/angular_spec.dart

+1
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,7 @@ main() {
182182
"angular.directive.NgIf",
183183
"angular.directive.NgInclude",
184184
"angular.directive.NgModel",
185+
"angular.directive.NgModelOptions",
185186
"angular.directive.NgModelConverter",
186187
"angular.directive.NgModelEmailValidator",
187188
"angular.directive.NgModelMaxLengthValidator",

0 commit comments

Comments
 (0)