我正在尝试编写一个内联编辑功能,而不使用此处概述的模板 http://plnkr.co/edit/EsW7mV?p=preview
最佳答案
您只需将模板的代码放在主页中即可。
<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>
这里有一个 fiddle :
http://jsfiddle.net/siliconball/QwDn9/2/
也可以拿走templateUrl: 'inline-edit.html'
如果您出于任何原因需要 Controller 范围,请放置 scope: false
在指令中。但随后您将必须随时跟踪您正在编辑哪个选项(也许使用 id)。如果这是您的情况,我建议稍微重构一下,您可能知道,这可能不是最好的选择。
如果您的情况(我猜是这样)是您想将其全部写入一个页面,因为您是通过某些 CGI 或动态内容脚本生成它,并且您不想在不同的页面中编写相同的代码( +脚本接口(interface)...),那么我建议也移动 inline-edit="todo.title"
以及 <div>
中的所有指令内容为了正交性。
关于angularjs - 如何在没有模板的情况下在 angularjs 中进行内联编辑?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18463076/