飞镖屏幕键盘事件

时间:2014-04-22 21:12:37

标签: dart angular-dart dart-html

我想用angular.js制作飞镖屏幕键盘。 如果按下一个字母,它应该在html网站上。

它是如何运作的?

这是我在index.html中得到的:

  
<button on-click="einsController.generateName()"id="z" class="button">Z</button>
<button on-click="einsController.generateName()"id="u" class="button">U</button>
<button on-click="einsController.generateName()"id="i" class="button">I</button>
<button on-click="einsController.generateName()"id="o" class="button">O</button>
<button on-click="einsController.generateName()"id="p" class="button">P</button>
<button on-click="einsController.generateName()"id="a" class="button">A</button>
<button on-click="einsController.generateName()"id="s" class="button">S</button>
<button on-click="einsController.generateName()"id="d" class="button">D</button>
<button on-click="einsController.generateName()"id="f" class="button">F</button>
<button on-click="einsController.generateName()"id="g" class="button">G</button>
<button on-click="einsController.generateName()"id="h" class="button">H</button>
<button on-click="einsController.generateName()"id="j" class="button">J</button>
<button on-click="einsController.generateName()"id="k" class="button">K</button>
<button on-click="einsController.generateName()"id="l" class="button">L</button>
<button on-click="einsController.generateName()"id="y" class="button">Y</button>
<button on-click="einsController.generateName()"id="x" class="button">X</button>
<button on-click="einsController.generateName()"id="c" class="button">C</button>
<button on-click="einsController.generateName()"id="v" class="button">V</button>
<button on-click="einsController.generateName()"id="b" class="button">B</button>
<button on-click="einsController.generateName()"id="n" class="button">N</button>
<button on-click="einsController.increment()"id="m" class="button">M</button>

这是信件出现的地方:

   <span id="badgeName">{{einsController.name}}  </span>

这是飞镖文件中的功能:

  String name = '';

    void generateName() {
     name = "Q"; 
}

我仍然没有得到它。我想我需要在generateName()方法中改变一些东西。

我想要一个类似于此http://code.tutsplus.com/tutorials/creating-a-keyboard-with-css-and-jquery--net-5774

的onScreenKeyboard

只有我需要使用dart Code。

1 个答案:

答案 0 :(得分:3)

ng-click指令应位于按钮上,您不需要在该按钮上显示要显示结果的标记。

当您使用具有类似功能的query('#letter_A').onClick.listen(...时,您不需要ng-click

您需要放置控制器keyboard,以便您的按钮和要显示输出的<div>位于应用控制器的标记内。

尝试一下,如果它没有用新代码更新您的问题,我会再看看。