Javascript 在ng repeat中进行内联编辑时，输入字段模糊

我正在尝试对数据表进行内联编辑（请参阅）

{{key}}
取消
拯救
{{model}}
编辑

我可以在许多地方看到，我们必须在

ng模型中使用
，在
ng repeat
中使用
，以避免范围问题。由于我不知道钥匙已经
我正在为模型做数据[key]

。

---

输入单个字符后，输入字段模糊

您描述的行为是正常的。如果仔细观察，您会发现输入值和指令都绑定到同一个对象，即

data[key]

。当您更改文本输入值时，

模型

将被更新，最终触发指令刷新，您将返回“列表”视图

解决这个问题的一个简单方法是在指令和输入值之间使用一个中间变量，并仅在单击“保存”按钮时更新模型。诸如此类：

  //Directive
  scope.newValue = null;

  scope.edit = function() {
    scope.editMode = true;
    scope.newValue = scope.model;

    $timeout(function() {
      elm.find('input')[0].focus();
    }, 0, false);
  };

  //Template
  <input type="text" on-enter="save()" on-esc="cancel()" ng-model="newValue" ng-show="editMode">

//指令
scope.newValue=null；
scope.edit=函数（）{
scope.editMode=true；
scope.newValue=scope.model；
$timeout（函数（）{
elm.find（'input'）[0].focus（）；
}，0，假）；
};
//模板

---

您可以看到一个修改过的plunker。

您描述的行为是正常的。如果仔细观察，您会发现输入值和指令都绑定到同一个对象，即

data[key]

。当您更改文本输入值时，

模型

将被更新，最终触发指令刷新，您将返回“列表”视图

解决这个问题的一个简单方法是在指令和输入值之间使用一个中间变量，并仅在单击“保存”按钮时更新模型。诸如此类：

  //Directive
  scope.newValue = null;

  scope.edit = function() {
    scope.editMode = true;
    scope.newValue = scope.model;

    $timeout(function() {
      elm.find('input')[0].focus();
    }, 0, false);
  };

  //Template
  <input type="text" on-enter="save()" on-esc="cancel()" ng-model="newValue" ng-show="editMode">

//指令
scope.newValue=null；
scope.edit=函数（）{
scope.editMode=true；
scope.newValue=scope.model；
$timeout（函数（）{
elm.find（'input'）[0].focus（）；
}，0，假）；
};
//模板

---

您可以看到修改后的plunker。

感谢Nicolas提供的解决方案。感谢Nicolas提供的解决方案。