[AngularJS] テキストをダブルクリックして編集させるディレクティブ | DevelopersIO
車輪開発大好きおたいがです。こんにちは。（挨拶） AngularJS ディレクティブ開発の練度を高めるため、掲題通りのコンポーネントを作ってみました。名前は 'cmEditableText' とでもしておきます。 たとえば <p> 要素のテキストをマウスでダブルクリックしたときに <input type="text"> 要素に差し替かわり編集可能状態になり、編集を終えてフォーカスを解除したときには入力値が <p> 要素に適用される…という仕掛けになっています。 デモ 完成品はこちらです。 ディレクティブのタイプ、および、ngModel 連携 元々配置されていた <p> 要素や <td> 要素をお手軽に編集可能にするという設計思想に基づいて作ったため「属性 (Attribute) タイプ」に指定しています。 また、モデルとのバインディングを保持するために ngModel を必須属性としており
![[AngularJS] テキストをダブルクリックして編集させるディレクティブ | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/f0d3607a7a199f07c7b213c833b97dd2b983c6b2/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2013%2F09%2Fangularjs.png)
alexperry.io
alexperry.io 2019 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
