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?
1 Answer
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.
1 Comment
annomiss
Thanks for the reply. I want to make Chrome Virtual Keyboard into Angularjs and it is difficult to organize the files.github.com/xontab/Chrome-Virtual-Keyboard