CodeSky 代码之空

随手记录自己的学习过程

AngularJS 让contentEditable支持ng-model

2015-08-20 14:21分类: HTML评论: 0

以前在一个网站上看到一个可以修改的框,以为是input,结果没想到是div,顿时觉得这是黑科技啊!!

然而并不是,后来我才知道有个attr叫做contentEditable,介绍见:http://www.w3school.com.cn/tags/att_global_contenteditable.asp

换言之这个so easy啦。

那么问题来了,AngualarJS里,我们可以在input里用ng-model来进行双向绑定,那么contentEditable呢?AngularJS目前并没有直接提供支持,但我们可以自己写。

使用一个directive就能搞定这个:

1/* 注册contentEditable支持ngModel */
2app.directive('contenteditable', function() {
3  return {
4    require: 'ngModel',
5    link: function(scope, element, attrs, ctrl) {
6      // view -> model
7      element.bind('blur', function() {
8        scope.$apply(function() {
9          ctrl.$setViewValue(element.html());
10        });
11      });
12
13      // model -> view
14      ctrl.$render = function() {
15        element.html(ctrl.$viewValue);
16      };
17
18      // load init value from DOM
19      ctrl.$render();
20    }
21  };
22});
23

评论 (0)