ion-label

Author: mlynch

Diff for: js/angular/directive/input.js

@@ -68,3 +68,31 @@ IonicModule
     }
   };
 }]);
+
+IonicModule
+.directive('ionLabel', ['$$rAF', function($$rAF) {
+  return {
+    restrict: 'E',
+    scope: true,
+    require: '?^ionInput',
+    compile: function($element, $attrs) {
+
+      return function link($scope, $element, $attrs, ionInputCtrl) {
+        var element = $element[0];
+
+        $element.addClass('input-label');
+
+        $element.attr('aria-label', $element.text());
+        var id = element.id || '_label-' + ++labelIds;
+
+        if(!element.id) {
+          $element.attr('id', id);
+        }
+
+        if(ionInputCtrl && ionInputCtrl.input) {
+          ionInputCtrl.input.setAttribute('aria-labelledby', id);
+        }
+      }
+    }
+  };
+}]);

Diff for: test/html/content.html

@@ -46,7 +46,7 @@ <h1 class="title">Title</h1>
             <textarea placeholder="Comments"></textarea>
           </ion-input>
           <ion-input class="item item-input">
-            <span class="input-label">Username</span>
+            <ion-label>Username</ion-label>
             <input type="text">
           </ion-input>
         </div>