{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 The star\" 的问题《Ng-click No getter for 'clickHandler' in A》','https://www.manongdao.com/q-642991.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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)
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 inmain_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
I don't know why
nameworks but I think"toggle.clickMe()"will work or remove thepublishAsargument.