首页 > Web开发 > 详细

angularJS contenteditable 指令双向绑定

时间:2016-06-22 18:49:01      阅读:604      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!