码迷,mamicode.com
首页 > Web开发 > 详细

angularJS contenteditable 指令双向绑定

时间:2016-06-22 18:50:14      阅读:158      评论:0      收藏:0      [点我收藏+]

标签:

项目遇到需求有点奇葩:双击div使其可编辑,失去焦点后进行数据绑定

通过自定义指令完成

好了上代码:

.directive(‘contentEditable‘, function() {
              return {
                require: ‘ngModel‘,
                link: function(scope, element, attrs, ctrl) {
                    debugger
                  // view -> model
                  element.bind(‘dblclick‘, function () {
                    if (!attrs.contenteditable) {
                        attrs.$set(‘contenteditable‘, true);
                        element[0].focus();
                    }
                  });
                  element.bind(‘blur‘, function() {
                    attrs.$set(‘contenteditable‘, false);
                    scope.$apply(function() {
                      ctrl.$setViewValue(element.html());
                    });
                  });
             
                  // model -> view
                  ctrl.$render = function() {
                    element.html(ctrl.$viewValue);
                  };
                }
              };
            })

 

 

参考站点:https://segmentfault.com/q/1010000003727922?_ea=348533

angularJS contenteditable 指令双向绑定

标签:

原文地址:http://www.cnblogs.com/cench/p/5607972.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!