AngularJSのeditablespanライブラリをinputタグではなく、textareaタグに置き換える方法

Question

AnuglarJSのeditablespanライブラリを使って、非同期通信のエディット機能を作ろうと思っています。
しかし、editablespanはinputで実装されていて、それをtextareaに置き換えたいのですが、方法がわかりません。。。
わかる方いますでしょうか？

下記でデモやコードをいじれます。
http://jsfiddle.net/KHttt/78/

Answer 1

どういう風にしたいのかがよく分かりませんが、デモコードを触ってとりあえずtextareaの入力内容はリアルタイムでバインドできるようにしてみました。

Comments

[kenny_sayama]

説明が不足していてすいません。。。

やりたい処理として、textareaに入力し、Enterを押すと確定される処理をしたいと思っています。現状ではEnterを押しても確定にならず改行されてしまいますorz

[chiku_]

directiveを下記のようにするとEnter確定されます。

mod.directive('editablespan', function() {
return {
restrict: 'E',
template: '<div><span ng-hide="editing" ng-class="spanClass">{{text}}</span><form ng-show="editing"><textarea ng-class="inputClass"></form><div>',
scope: {
text: '=model',
onReady: '&',
spanClass: '@',
inputClass: '@',
inputType: '@'
},
replace: true,
link: function(scope, element, attrs) {
scope.getInputType = function() {
return scope.inputType || 'text';
};

var span = angular.element(element.children()[0]);
var form = angular.element(element.children()[1]);
var input = angular.element(element.children()[1][0]);

span.bind('click', function(event) {
input[0].value = scope.text;
startEdit();
});

function startEdit() {
bindEditElements();
setEdit(true);
input[0].focus();
}

function bindEditElements() {
input.bind('blur', function() {
stopEdit();
});

input.bind('keydown', function(event) {
if (event.keyCode == 13) {
if (event.stopPropagation) event.stopPropagation();
if (event.preventDefault) event.preventDefault();
event.cancelBubble = true;
event.returnValue = false;
save();
stopEdit();
}
});

input.bind('keyup', function(event) {
if(isEscape(event)) {
stopEdit();
}
});

form.bind('submit', function() {
// you can't save empty string
if(input[0].value) {
save();
}
stopEdit();
});
}

function save() {
scope.text = input[0].value;
scope.$apply();
scope.onReady();
}

function stopEdit() {
unbindEditElements();
setEdit(false);
}

function unbindEditElements() {
input.unbind();
form.unbind();
}

function setEdit(value) {
scope.editing = value;
scope.$apply();
}

function isEscape(event) {
return event && event.keyCode == 27;
}
}
};
});