How to set focus for the input box once a item is selected from select box by using directives

Question

I have two textboxes in which the first textbox is read-only.It is used to select the list of items. Once an item is selected in the first input box i need to focus the second input box.I have used a directive which focuses the second input box directly but i would like to focus the second input box only if the first input box has value.

Directive:

.directive('focus', function($timeout) {
    return {
        link: function(scope, element, attrs) {

            $timeout(function() {
                element[0].focus();
            }, 150);
        }
    };
});

Html:

<label class="item item-input InputFormFull">
<span class="input-label"> {{'loadproducttype_message' | translate}} *</span>
<input stopccp focus-me style="margin-left: 5px;" ng-model="vm.product.type"
       placeholder="{{'eloadproducttype_message' | translate}}"
       type="text" ng-readonly="true" ng-click="vm.selectProduct()" />
<i class="ion-chevron-down"></i>
</label>
<ion-scroll direction="x" class="item wide-item" ng-if="vm.showProductList === 'true'">
    <span ng-repeat="v in vm.items" class="scroll_x" ng-click="vm.setProducts(v)">
       {{ v.display.name }}
    </span>
    <span ng-if="vm.items.length === 0" class="scroll_x">
       {{"addproduct_message" | translate}}
    </span>
</ion-scroll>
<label class="item item-input InputFormFull"
       ng-if="vm.product.selectedtype === 'piece'" focus>
<span class="input-label"> {{'piece_message' | translate}} *</span>
<input stopccp decimalpoint style="margin-left: 5px;"
       ng-model="vm.product.count" maxlength="8" 
       onkeydown="if(this.value.length === 8) this.value = this.value.slice(0, -1);"
       placeholder="0" type="number" ng-change="vm.onTotalCost()" 
       oninput="this.value = this.value.replace(/[^0-9]/g, '');
                this.value = this.value.replace(/(\..*)\./g, 0);"
       ng-click= "vm.hideScrollContent()"
    />
</label>

Instead of giving a condition in controller i would like to do it in directive itself.I would like to know is it possible to do it in directives.

Sravan · Accepted Answer · 2018-01-03T10:36:58.300

1

Change your directive and take a scope, watch the value in focus-me attribute and focus the input

When your first input box value is changed, you can assign the focussed value to true

HTML:

<input stopccp focus-me="{{focussed}}" style="margin-left: 5px;" ng-model="vm.product.type" placeholder="{{'eloadproducttype_message' | translate}}" type="text" ng-readonly="true" ng-click="vm.selectProduct()" />

Directive:

app.directive('focusMe', function($timeout) {
  return {
    scope: { focus: '@focusMe' },
    link: function(scope, element) {
      scope.$watch('focus', function(value) {
        if(value === "true") {
          $timeout(function() {
            element[0].focus();
          });
        }
      });
    }
  };
});

Here is a DEMO

edited Jan 03 '18 at 10:36

answered Jan 03 '18 at 10:31

Sravan

18,467
3
30
54

working fine as expected thankyou could you please give me some links where i could learn more about directives pls – Nidhin Kumar Jan 03 '18 at 13:12
Links you will get easily from google, here are some, [official](https://docs.angularjs.org/guide/directive), [tutorialspoint](https://www.tutorialspoint.com/angularjs/angularjs_custom_directives.htm) , [customdirectives](https://www.sitepoint.com/practical-guide-angularjs-directives/) – Sravan Jan 03 '18 at 13:20
It would be more efficient to avoid isolate scope and simply use [$observe](https://docs.angularjs.org/api/ng/type/$compile.directive.Attributes#$observe). The directive as written adds three watchers; one for the interpolation, one for the attribute binding, and another in the postLink function. While it works, it has performance issues and will conflict with other directives that add isolate scope. – georgeawg Jan 03 '18 at 13:55

How to set focus for the input box once a item is selected from select box by using directives

1 Answers1