Menu
Trying to get a simple click handler working, and it's proving to be quite frustrating. The application is just a test application to try out different Angular.Dart features. - Using Dart 1.6 and Angular 1.0 and running in Dartium -
Clicking the button throws the error. Ng-click No getter for 'clickMe'. But data binding on the input and label works perfectly fine.
Sample code
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
class TestMod extends Module {
TestMod() {
bind(ToggleComponent);
}
}
@Component(selector: 'toggle-comp', templateUrl: "test.html", publishAs: 'toggle')
class ToggleComponent {
String name = "";
@NgTwoWay('rating')
int rating;
ToggleComponent() {
}
void clickMe() {
print("Click");
}
}
void main() {
applicationFactory()
..addModule(new TestMod())
..run();
}
test.html file - where the binding works for ng-model but not for ng-click
<div>
<h3>Hellos {{name}} {{rating}}!</h3>
Name: <input type="text" ng-model="name">
<button ng-click="clickMe()">Click me</button>
</div>
and lastly here is the index.html file
<!DOCTYPE html>
<html ng-app >
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularDartTest</title>
<script async type="application/dart" src="main.dart"></script>
<script async src="packages/browser/dart.js"></script>
<link rel="stylesheet" href="assets/main.css">
</head>
<body>
<toggle-comp rating="5"></toggle-comp>
</body>
</html>
Stacktrace when you hit the button
No getter for 'clickMe'.
STACKTRACE:
#0 StaticClosureMap.lookupGetter (package:angular/core/parser/static_closure_map.dart:14:25)
#1 StaticClosureMap.lookupFunction (package:angular/core/parser/static_closure_map.dart:25:26)
#2 ClosureMapLocalsAware.lookupFunction.<anonymous closure> (package:angular/core/parser/parser.dart:253:44)
#3 CallScope.eval (package:angular/core/parser/eval_calls.dart:27:25)
#4 _UnwrapExceptionDecorator.eval (package:angular/core/parser/parser.dart:117:30)
#5 BoundExpression.call (package:angular/core/parser/syntax.dart:59:36)
#6 NgEvent._initListener.<anonymous closure> (package:angular/directive/ng_events.dart:142:39)
#7 _rootRunUnary (dart:async/zone.dart:840)
#8 _ZoneDelegate.runUnary (dart:async/zone.dart:466)
#9 _onRunUnary.<anonymous closure> (package:angular/core/zone.dart:122:63)
#10 VmTurnZone._onRunBase (package:angular/core/zone.dart:104:16)
#11 _onRunUnary (package:angular/core/zone.dart:122:17)
#12 _CustomZone.runUnary (dart:async/zone.dart:748)
#13 _CustomZone.runUnaryGuarded (dart:async/zone.dart:656)
#14 _CustomZone.bindUnaryCallback.<anonymous closure> (dart:async/zone.dart:682)
422
The issue is that angular transformer is having trouble finding test.html, thus not extracting the clickMe getter. Getters get generated only if we see the symbol in an expression in a template.
By getter I mean the mapping "clickMe": (o) => o.clickme. You can always check all the getters/setters we have generated in main_static_expressions.dart.
The transformer should be fixed (PRs are very welcome), but in the mean time there are a number of ways to force the generation of the getter:
P.S. In angular.dart v1.0 publishAs does nothing, as the expression evaluation context is the component itself. docs
144
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
