Creating virtual keyboard as a AngularJs module?

Question

I have a AngularJs app and I need to create a virtual keyboard. The keyboard should be a separate module. My problem is that I am not sure how to properly structure my module? Should it be implemented as a directive, or service or etc? I want my virtual keyboard to show whenever a textarea is clicked and hide otherwise. So I need help how to begin structuring this module. Where should the logic be implemented? Where the view?

Answer 1

Interesting! I would do something like that:

<div ng-view></div>
<div ng-controller="virtualKeyboardController()">
  <virtual-keyboard></virtual-keyboard>
</div>

The <virtual-keyboard> directive will replace the element with the right HTML (you could also use a ng-include instead of a directive; I personally believe the directive is the better way here). Then the virtualKeyboardController will use a custom service that gives you some methods to:

• show the keyboard;
• hide the keyboard;
• do other keyboard stuff.

The service must then be injected inside every controller that could use a virtual keyboard and bind all the textareas to it (that's probably the annoying part, if your app is already done).

NOTE: I created a <div> which contains the <virtual-keyboard> only as an example, to avoid controllers' conflicts, but there may be a better solution; also adding a ng-if to the parent <div> you could do the show/hide check out of the directive.