updated template to use new directive methods

Author: davidenke

src/view/mdKeyboard.view.html

@@ -2,35 +2,47 @@
     <div ng-repeat="row in keyboard.keys" layout="row">
         <div flex ng-repeat="key in row" ng-switch="key[0]" ng-class="getKeyClass(key)">
             <span ng-switch-when="Bksp">
-                <md-button class="md-raised key-bksp" ng-mousedown="pressed($event, key[0])" aria-label="{{key[0]}}">
+                <md-button class="md-raised key-bksp"
+                           ng-mousedown="pressed($event, key[0])"
+                           aria-label="{{key[0] || 'key'}}">
                     <md-icon>keyboard_backspace</md-icon>
                 </md-button>
             </span>
             <span ng-switch-when="Tab">
-                <md-button class="md-raised key-tab" ng-mousedown="pressed($event, key[0])" aria-label="{{key[0]}}">
+                <md-button class="md-raised key-tab"
+                           ng-mousedown="pressed($event, key[0])"
+                           aria-label="{{key[0] || 'key'}}">
                     <md-icon>keyboard_tab</md-icon>
                 </md-button>
             </span>
             <span ng-switch-when="Caps">
-                <md-button class="md-raised key-caps" ng-class="{'locked': capsLocked, 'md-focused': capsLocked}" ng-mousedown="pressed($event, key[0])"
-                           ng-click="toggleCapsLock()" aria-label="{{key[0]}}">
+                <md-button class="md-raised key-caps"
+                           ng-class="{'locked': capsLocked, 'md-focused': capsLocked}"
+                           ng-mousedown="pressed($event, key[0])"
+                           aria-label="{{key[0] || 'key'}}">
                     <md-icon>keyboard_capslock</md-icon>
                 </md-button>
             </span>
             <span ng-switch-when="Enter">
-                <md-button class="md-raised key-enter" ng-mousedown="pressed($event, key[0])" aria-label="{{key[0]}}">
+                <md-button class="md-raised key-enter"
+                           ng-mousedown="pressed($event, key[0])"
+                           aria-label="{{key[0] || 'key'}}">
                     <md-icon>keyboard_return</md-icon>
                 </md-button>
             </span>
             <span ng-switch-when="Shift">
-                <md-button class="md-raised key-shift" ng-mousedown="pressed($event, key[0]); toggleCaps()" aria-label="{{key[0]}}">
+                <md-button class="md-raised key-shift"
+                           ng-mousedown="pressed($event, key[0])"
+                           aria-label="{{key[0] || 'key'}}">
                     {{key[0]}}
                 </md-button>
             </span>
             <span ng-switch-when="Spacer"></span>
             <span ng-switch-default>
-                <md-button class="md-raised key-char" ng-mousedown="pressed($event, key[!capsLocked && !caps ? 0 : 1])" aria-label="{{key[!capsLocked && !caps ? 0 : 1]}}">
-                    {{key[!capsLocked && !caps ? 0 : 1]}}
+                <md-button class="md-raised key-char"
+                           ng-mousedown="pressed($event, key[!capsLocked && !caps ? 0 : 1] || key[0])"
+                           aria-label="{{key[!capsLocked && !caps ? 0 : 1] || 'key'}}">
+                    {{key[!capsLocked && !caps ? 0 : 1] || key[0]}}
                 </md-button>
             </span>
         </div>