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.

Answer 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