AngularDart 中的“clickHandler"没有吸气剂

本文介绍了AngularDart 中的“clickHandler"没有吸气剂的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

试图让一个简单的点击处理程序工作，但事实证明这是非常令人沮丧的.该应用程序只是一个测试应用程序，用于尝试不同的 Angular.Dart 功能.- 使用 Dart 1.6 和 Angular 1.0 并在 Dartium 中运行 -

单击按钮会引发错误.Ng-click 没有clickMe"的吸气剂.但是输入和标签上的数据绑定工作得很好.

示例代码

import 'package:angular/angular.dart';导入'包:角度/application_factory.dart'；类 TestMod 扩展模块 {测试模块(){绑定(切换组件)；}}@Component(selector: 'toggle-comp', templateUrl: "test.html", publishAs: 'toggle')类切换组件{字符串名称 = "";@NgTwoWay('评级')国际评级；切换组件(){}无效点击我(){打印(点击")；}}无效主(){应用工厂()..addModule(new TestMod())..跑();}

test.html 文件 - 绑定适用于 ng-model 但不适用于 ng-click


<h3>你好{{name}} {{rating}}！</h3>名称:<input type="text" ng-model="name"><button ng-click="clickMe()">点击我</button>

最后是 index.html 文件

<html ng-app ><头><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"><身体><toggle-comp rating="5"></toggle-comp></html>

点击按钮时的堆栈跟踪

'clickMe' 没有 getter.堆栈跟踪:#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.(包: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.(包:angular/directive/ng_events.dart:142:39)#7 _rootRunUnary (dart:async/zone.dart:840)#8 _ZoneDelegate.runUnary (dart:async/zone.dart:466)#9 _onRunUnary.(包: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.(dart:async/zone.dart:682)

解决方案

问题是角度转换器在查找 test.html 时遇到问题，因此无法提取 clickMe getter.仅当我们在模板中的表达式中看到符号时才会生成 getter.

getter 我的意思是映射 "clickMe": (o) =>o.clickme.您可以随时查看我们在 main_static_expressions.dart 中生成的所有 getter/setter.

transformer 应该是固定的(非常欢迎 PR)，但同时有多种方法可以强制生成 getter:

使用 exportExpressions.文档
在 pubspec.yaml 中使用 html_files.文档
将您的组件及其模板放在 lib 目录中.

附言在 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"没有吸气剂的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！