How to do inline editing in angularjs without Template?

Question

am trying to write an inline editing function without using a template as outlined here http://plnkr.co/edit/EsW7mV?p=preview

Answer 1

You can just place the code of the template in the main page.

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

Here there is a fiddle:

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

Also temeber to take away the templateUrl: 'inline-edit.html'

If you need the controller scope for any reason place scope: false in the directive. But then you will have to track which option are you editing in any moment (maybe using the id). If that is your situation i suggest to refactor a bit, as you may know, probably is not the best option.

If your situation, i guess it is, is that you want to write it all in one page because you are generating it through some CGI or dynamic content script and you don't want to write the same code in different pages (+scripts interfaces ...), then i suggest also to move the inline-edit="todo.title" and all the directive stuff in the <div> for the sake of orthogonality.