<ion-label> focus

ionic-team · Dec 7, 2015 · 1011019 · 1011019
1 parent c68ca9f
commit 1011019
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 11 deletions.
diff --git a/js/angular/directive/input.js b/js/angular/directive/input.js
@@ -13,6 +13,11 @@
 *   <ion-input>
 *     <input type="text" placeholder="First Name">
 *   <ion-input>
+*
+*   <ion-input>
+*     <ion-label>Username</ion-label>
+*     <input type="text">
+*   </ion-input>
 * </ion-list>
 * ```
 */
@@ -33,18 +38,40 @@ IonicModule
 }]);
 
 /**
- * Input label adds accessibility to <span class="input-label">.
- */
+* @ngdoc directive
+* @name ionLabel
+* @parent ionic.directive:ionList
+* @module ionic
+* @restrict E
+*
+* New in Ionic 1.2. It is strongly recommended that you use `<ion-label>` in place
+* of any `<label>` elements for maximum cross-browser support and performance.
+*
+* Creates a label for a form input.
+*
+* @usage
+*
+* ```html
+* <ion-list>
+*   <ion-input>
+*     <ion-label>Username</ion-label>
+*     <input type="text">
+*   </ion-input>
+* </ion-list>
+* ```
+*/
 IonicModule
-.directive('inputLabel', [function() {
+.directive('ionLabel', ['$timeout', function($timeout) {
   return {
-    restrict: 'C',
+    restrict: 'E',
     require: '?^ionInput',
-    compile: function($element) {
+    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;
 
@@ -54,24 +81,33 @@ IonicModule
 
         if (ionInputCtrl && ionInputCtrl.input) {
           ionInputCtrl.input.setAttribute('aria-labelledby', id);
+
+          $element.on('click', function(e) {
+            console.log('CLICK');
+            $timeout(function() {
+              ionInputCtrl.input.focus();
+            })
+          })
+
         }
       }
     }
   };
 }]);
 
+/**
+ * Input label adds accessibility to <span class="input-label">.
+ */
 IonicModule
-.directive('ionLabel', [function() {
+.directive('inputLabel', [function() {
   return {
-    restrict: 'E',
+    restrict: 'C',
     require: '?^ionInput',
-    compile: function($element, $attrs) {
+    compile: function($element) {
 
       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;
 
@@ -82,6 +118,7 @@ IonicModule
         if (ionInputCtrl && ionInputCtrl.input) {
           ionInputCtrl.input.setAttribute('aria-labelledby', id);
         }
+
       }
     }
   };

diff --git a/test/css/input-text.html b/test/css/input-text.html
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html ng-app="ionic">
   <head>
-    <script src="../../dist/js/ionic.bundle.js"></script>
     <meta charset="utf-8">
     <title>Text Inputs</title>
     <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">