以前在一个网站上看到一个可以修改的框,以为是input,结果没想到是div,顿时觉得这是黑科技啊!!
然而并不是,后来我才知道有个attr叫做contentEditable,介绍见:http://www.w3school.com.cn/tags/att_global_contenteditable.asp
换言之这个so easy啦。
那么问题来了,AngualarJS里,我们可以在input里用ng-model来进行双向绑定,那么contentEditable呢?AngularJS目前并没有直接提供支持,但我们可以自己写。
使用一个directive
就能搞定这个:
/* 注册contentEditable支持ngModel */
app.directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, element, attrs, ctrl) {
// view -> model
element.bind('blur', function() {
scope.$apply(function() {
ctrl.$setViewValue(element.html());
});
});
// model -> view
ctrl.$render = function() {
element.html(ctrl.$viewValue);
};
// load init value from DOM
ctrl.$render();
}
};
});