将另一个元素传递给 ng-click

Question

我想创建一个项目列表，它们是简单的可点击文本。每次单击一个项目时，它都会转换为输入（文本框），您可以对其进行编辑。我已经这样做了。我唯一缺少的是当我单击该项目时 将焦点设置在输入元素 上。我的 HTML 代码如下：

<div ng-repeat="item in items">
  <span ng-if="!valueIsEditedForItem(item.id)">
    <a href="" ng-click="editValueForItem(item.id)">
      {{ item.value }}
    </a>
  </span>
  <span ng-if="valueIsEditedForItem(item.id)">
    <input ng-model="edited_value"
           ng-keyup="onValueInput($event, item.id, edited_value)"/>
  </span>
</div>

<a>元素和<input>元素是两个不同的元素。所以，我的想法是以某种方式将输入元素传递给 ng-click="editValueForItem(item.id)。它应该看起来像这样：

<a href="" ng-click="editValueForItem(item.id, inputElement)">
  {{ item.value }}
</a>

然后我可以通过这样做将焦点设置到输入元素：

inputElement.focus();

我知道 $event 变量保存了 $event.target 中事件的元素。但我的活动是在 <a> 而不是 <input>。 如何将 <input> 元素引用到 <a> 中？

编辑：解决方案

看了答案中的解决方案建议，最终通过id引用实现了：

HTML

<input id="{{'input' + item.id}}"
       ng-model="edited_value"
       ng-keyup="onInput($event, item.id, edited_value)"/>

JS

$scope.editValueForItem = function (itemId) {
  $scope.currentlyEditedItemId = itemId;

  // focus on the input element
  setTimeout(function () {
    var inputElement = document.getElementById("input" + itemId);
    if (inputElement) {
      inputElement.focus();
    }
  }, 0);
};

setTimeout 子句是必须的，以优先初始化元素。如果删除它，那么 getElementById 命令将 return 为空，因为输入元素尚未初始化。

但是，创建我自己的指令的解决方案将是更合适的选择。

Answer 1

一个解决方案是将 $event 传递给函数并使用 $event.target 找到输入：

<a href="" ng-click="editValueForItem($event)">
    {{ item.value }}
</a>

editValueForItem = function($event) {
    let $target = angular.element($event.target);
    let nextInput = $target.parent().parent().find('input')[0];

    if (nextInput.length) {
        nextInput.focus();
    }
}

Answer 2

直接的方法是添加一些参考，例如：

<input ng-model="edited_value" editable="{{item.id}}"
       ng-keyup="onValueInput($event, item.id, edited_value)"/>

// editValueForItem method
$timeout(() => angular.element(document.querySelector('[editable="' + itemId + '"]')).focus())

另一个可能是：

<input ng-model="edited_value" take-focus-on-init
       ng-keyup="onValueInput($event, item.id, edited_value)"/>

其中 take-focus-on-init 是 link 函数中焦点元素的指令。

第三个是make指令：

<editable value="item.value"></editable>

使用模板：

<div ng-if="!inEditMode">{{item.value}}</div>
<div ng-if="inEditMode"><input ...</div>

这里可以使用简单的element.find('input').focus()

将另一个元素传递给 ng-click

Pass another element to ng-click

html

pass-by-reference

angularjs