AngularJS 让contentEditable支持ng-model

以前在一个网站上看到一个可以修改的框，以为是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();
    }
  };
});