Ng-click No getter for 'clickHandler' in AngularDart

问题

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)

回答1:

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

回答2:

I don't know why name works but I think "toggle.clickMe()" will work or remove the publishAs argument.

来源：https://stackoverflow.com/questions/26334563/ng-click-no-getter-for-clickhandler-in-angulardart

标签

dart

angular-dart