要素の単純なインプレース編集を行うディレクティブを作成しようとしています。これまでの私のコードは次のとおりです。
directive('clickEdit', function() {
return {
restrict: 'A',
template: '<span ng-show="inEdit"><input ng-model="editModel"/></span>' +
'<span ng-show="!inEdit" ng-click="edit()">{{ editModel }}</span>',
scope: {
editModel: "=",
inEdit: "@"
},
link: function(scope, element, attr) {
scope.inEdit = false;
var savedValue = scope.editModel;
var input = element.find('input');
input.bind('keyup', function(e) {
if ( e.keyCode === 13 ) {
scope.save();
} else if ( e.keyCode === 27 ) {
scope.cancel();
}
});
scope.edit = function() {
scope.inEdit = true;
setTimeout(function(){
input[0].focus();
input[0].select();
}, 0);
};
scope.save = function() {
scope.inEdit = false;
};
scope.cancel = function() {
scope.inEdit = false;
scope.editModel = savedValue;
};
}
}
})
scope.edit 関数は inEdit を true に設定します。これはうまく機能します。テキストが非表示になり、input タグが表示されます。ただし、scope.inEdit を false に設定する scope.save 関数はまったく機能しません。入力タグを隠したり、テキストを表示したりしません。
なんで?