如何在没有模板的 angularjs 中进行内联编辑？答案

【问题标题】：How to do inline editing in angularjs without Template?如何在没有模板的 angularjs 中进行内联编辑？
【发布时间】：2013-08-27 10:34:43
【问题描述】：

我正在尝试在不使用此处概述的模板的情况下编写内联编辑功能 http://plnkr.co/edit/EsW7mV?p=preview

【问题讨论】：

通过在没有模板的情况下编写指令可能有助于理解您想要实现的目标？有几种方法可以实现（但是模板可能是最好的方法），但不知道您要实现什么，我不知道要展示哪种方法。
那么我们必须在这里做什么？
模板是最好的方法，我同意。但是当我们有动态值时，模板就成了一个大问题。所以我正在寻找的是一个不使用模板的内联编辑的例子。希望这会有所帮助。
好吧，您必须在某处编写 HTML，据我所知，您的选项 r (1) 就像您在指令中所做的 (2) 一样，在指令中写入 html 而不是模板 (3) 的 url链接功能开始编写相关的 html。我相信你所做的是“最佳实践”

标签： angularjs inline-editing

【解决方案1】：

您可以将模板的代码放在主页中。

<li ng-repeat="todo in todos" inline-edit="todo.title" on-save="updateTodo(todo.title)" on-cancel="cancelEdit(todo.title)">
  <div>
  <input type="text" on-enter="save()" on-esc="cancel()" ng-model="model" ng-show="editMode">
  <button ng-click="cancel()" ng-show="editMode">cancel</button>
  <button ng-click="save()" ng-show="editMode">save</button>
  <span ng-mouseenter="showEdit = true" ng-mouseleave="showEdit = false">
    <span ng-hide="editMode" ng-click="edit()">{{model}}</span>
    <a ng-show="showEdit" ng-click="edit()">edit</a>
  </span>
  </div>
</li>

这里有一个小提琴：

http://jsfiddle.net/siliconball/QwDn9/2/

还想带走templateUrl: 'inline-edit.html'

如果您出于任何原因需要控制器范围，请在指令中放置 scope: false。但是随后您将不得不随时跟踪您正在编辑的选项（可能使用 id）。如果这是您的情况，我建议您进行一些重构，您可能知道，这可能不是最佳选择。

如果你的情况，我猜是，你想把它全部写在一个页面中，因为你是通过一些 CGI 或动态内容脚本生成它，并且你不想在不同的页面中编写相同的代码（ +scripts 接口...），那么我建议也移动inline-edit="todo.title" 和<div> 中的所有指令内容，以实现正交性。

【讨论】：

他们都有ng-model="model"，我不明白为什么它同时支持多个编辑？