如何在使用指令从 select 框中 selected 后为输入框设置焦点

Question

我有两个文本框，其中第一个文本框被读取-only.It 用于select 项目列表。一旦在第一个输入框中 select 编辑了一个项目，我需要聚焦第二个输入 box.I 已经使用了直接聚焦第二个输入框的指令，但我只想聚焦第二个输入框，如果第一个输入框有值。

指令：

.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>

我不想在控制器中给出条件，而是在指令中执行 itself.I 想知道是否可以在指令中执行。

Answer 1

更改您的指令并采用 scope，观察 focus-me 属性和 focus the input

中的值

当你的第一个输入框值改变时，你可以将focussed值赋值给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()" />

指令：

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

如何在使用指令从 select 框中 selected 后为输入框设置焦点

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

html

javascript

angularjs

ionic-v1