title: Write a custom "editable" directive with angularjs
body: <p>I'm studying angularjs, and I want to write a custom "editable" directive, which can make a normal html element "editable": </p>
  
  <p>When user clicks it, it will show a text input or textarea to let user edit the content, and there is also a "update" and "cancel" button besides. User can click the "update" button or press "Ctrl+enter" to submit the modified content, or click "cancel" or press "escape" to cancel the modification.</p>
  
  <p>The "editable" signature looks like:</p>
  
  <pre><code>&lt;div editable 
       e-trigger="click|dblclick"       /* use click or dblclick to trigger the action */
       e-update-url="http://xxx/xxx"    /* when submitting, the data will PUT to this url */
       e-singleline="true|false"        /* if ture, use text input, otherwise textarea */
       ng-model="name"&gt;                 /* the corresponding model name */
  {{name}}
  &lt;/div&gt;
  </code></pre>
  
  <p>I've create a live demo here: <a href="http://jsfiddle.net/Freewind/KRduz/" rel="nofollow">http://jsfiddle.net/Freewind/KRduz/</a>, you can just update it.</p>