如何在沒有模板的情況下在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/

而且如果需要的控制器範圍內以任何理由地方scope: false在指令temeber帶走templateUrl: 'inline-edit.html'

。但是，你將不得不跟蹤你在任何時候編輯哪個選項（可能使用id）。如果那是你的情況，我建議重構一下，如你所知，可能不是最好的選擇。

如果您的情況，我想是的，是因爲您要通過一些CGI或動態內容腳本生成它，並且您不希望在不同的頁面中編寫相同的代碼（+腳本接口...），那麼我建議也爲了正交性而移動inline-edit="todo.title"和<div>中的所有指令。