0

我有两个文本框，其中第一个文本框是只读的。它用于选择项目列表。一旦在第一个输入框中选择了一个项目，我需要关注第二个输入框。我使用了一个直接关注第二个输入框的指令，但我只想在第一个输入框有值的情况下关注第二个输入框。

指示：

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

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

4

1 回答 1

1

更改您的指令并采取 a 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();
          });
        }
      });
    }
  };
});

这是一个演示

于 2018-01-03T10:31:11.970 回答