CODEWITHSUNDEEP
javascriptangularjskeyboardangularjs-module
annomiss
annomiss

Reputation: 59

Creating virtual keyboard as a AngularJs module?

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?

Upvotes: 3

Views: 3135

Answers (1)

Polmonite
Polmonite

Reputation: 943

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.

Upvotes: 2

Related Questions