在AngularDart中为“clickHandler”单击无吸气剂 [英] Ng-click No getter for 'clickHandler' in AngularDart
问题描述
尝试获取一个简单的点击处理程序工作，这证明是非常令人沮丧。应用程序只是一个测试应用程序，尝试不同的Angular.Dart功能。 - 使用Dart 1.6和Angular 1.0并在Dartium中运行 -
单击按钮会抛出错误。
点击clickMe的无吸气剂。
示例代码
< pre class =lang-dart prettyprint-override>
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文件 - 其中绑定适用于ng-model， ng-click
< div&
< h3> Hellos {{name}} {{rating}}！< / h3>
名称：< input type =textng-model =name>
< button ng-click =clickMe（）>点击我< / button>
< / div>
最后是index.html文件
<！DOCTYPE html>
< html ng-app>
< head>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< title> AngularDartTest< / title>
< script async type =application / dartsrc =main.dart>< / script>
< script async src =packages / browser / dart.js>< / script>
< link rel =stylesheethref =assets / main.css>
< / head>
< body>
< toggle-comp rating =5>< / toggle-comp>
< / body>
< / html>
Stacktrace当你点击按钮
clickMe没有getter。
STACKTRACE：
＃0 StaticClosureMap.lookupGetter（package：angular / core / parser / static_closure_map.dart：14：25）
＃1 StaticClosureMap.lookupFunction 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 /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）
问题是角变换器找不到test.html，因此无法提取clickMe getter。
通过getter我的意思是映射clickMe：（o）只要我们在模板中的表达式中看到符号， => o.clickme 。您可以随时检查在 main_static_expressions.dart 中生成的所有getters / setter。
变压器应该固定（PR非常受欢迎），但是同时有很多方法来强制生成getter：
PS在angular.dart v1.0中publishAs什么都不做，因为表达式求值上下文是组件本身。 文档
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 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:
- use exportExpressions. docs
- use html_files in the pubspec.yaml. docs
- put your component and its template in the lib directory.
P.S. In angular.dart v1.0 publishAs does nothing, as the expression evaluation context is the component itself. docs
这篇关于在AngularDart中为“clickHandler”单击无吸气剂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
