如何在没有模板的情况下在angularjs中进行内联编辑？

Question

我试图编写内联编辑功能而不使用此处概述的模板 http://plnkr.co/edit/EsW7mV?p=preview

Answer 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/

也是temeber带走了 templateUrl: 'inline-edit.html'

如果您scope: false在指令中出于任何原因需要控制器范围.但是,您必须随时跟踪您正在编辑的选项(可能使用ID).如果这是你的情况,我建议稍微重构,你可能知道,可能不是最好的选择.

如果您的情况,我猜是,您希望在一个页面中编写它,因为您通过一些CGI或动态内容脚本生成它,并且您不希望在不同页面中编写相同的代码(+脚本接口) ...),然后我建议为了正交性而移动inline-edit="todo.title"所有指令内容<div>.