dart onscreen Keyboard events - dart

Question

i want to make an onscreen Keyboard in dart with angular.js.
If one letter is pressed it should be on the html site.
How does it work?
This is what i´ve got in the 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>
This is where the letter shall appear:
<span id="badgeName">{{einsController.name}} </span>
this is the function in the dart File:
String name = '';
void generateName() {
name = "Q";
}
I still don´t get it. I think I need to change something in the method of generateName().
I want an onScreenKeyboard something like this http://code.tutsplus.com/tutorials/creating-a-keyboard-with-css-and-jquery--net-5774
Only that it I need to use dart Code.

Answer 1

The ng-click directive should be on the button where you click not on the tag where you want to show the result.
You don't need your query('#letter_A').onClick.listen(... when you use ng-click they have similar functionality.
You need to place the controller keyboard so that your buttons and the <div> where you want to show the output are within the tag where the controller is applied.
Try it and if it doesn't work update your question with the new code and I'll take another look.