angularJS contenteditable 指令双向绑定
项目遇到需求有点奇葩:双击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 指令双向绑定的更多相关文章
- AngularJS中数据双向绑定(two-way data-binding)
		
1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...
 - AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4
		
1.切换工作目录 git checkout step- #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-mo ...
 - angularJs实现数据双向绑定的原理
		
angular1.x在指定的事件触发时(比如dom事件,xhr响应事件,浏览器定位变更事件,定时器事件),通过脏值检测的方式比对数据是否有变更,来决定是否更新视图. angular2使用了zone.j ...
 - angularjs深入理解向指令传递数据,双向绑定机制
		
<!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...
 - angularjs bind与model配合双向绑定 表达式方法输出
		
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
 - 深入学习AngularJS中数据的双向绑定机制
		
来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...
 - 数据双向绑定页面无反应(angularjs)
		
问题引入 使用 angularjs进行过一段时间的开发后,基本上都会遇到一个这样的坑:页面进行了双向数据绑定,控制层的数据也已经改变了,但是视图层的数据却没有改变. 其实造成这个问题的原因大致分为以下 ...
 - Angularjs 双向绑定机制解析
		
文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...
 - Angular系列----AngularJS入门教程05:双向绑定(转载)
		
在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...
 
随机推荐
- HDU——1465不容易系列之一(错排公式)
			
不容易系列之一 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Su ...
 - Python Base Four
			
35. In python, file operation syntax is similar to c. open(file,'r',……) //the first parameters is ne ...
 - 【bzoj1191】[HNOI2006]超级英雄Hero - 二分图匹配
			
现在电视台有一种节目叫做超级英雄,大概的流程就是每位选手到台上回答主持人的几个问题,然后根据回答问题的多少获得不同数目的奖品或奖金.主持人问题准备了若干道题目,只有当选手正确回答一道题后,才能进入下一 ...
 - eval()函数的巧用
			
eval的功能 将字符串str当成有效的表达式来执行.. 写函数,专门计算图形的面积 其中嵌套函数,计算圆的面积,正方形的面积和长方形的面积 调用函数area(‘圆形’,圆半径) 返回圆的面积 调用 ...
 - SQL2005:已更新或删除的行值要么不能使该行成为唯一行,要么改变了多个行.
			
原文发布时间为:2008-08-04 -- 来源于本人的百度文章 [由搬家工具导入] 最近使用sql server2005,已经不止一次的发生了这样的错误.具体是怎么出来的我不清楚,其表现为:数据库中 ...
 - JVM指令详解(下)
			
九.自增减指令 该指令用于对本地(局部)变量进行自增减操作.该指令第一参数为本地变量的编号,第二个参数为自增减的数量. 比如对于代码: int d=10; d++; d ...
 - 标准C程序设计七---102
			
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
 - 使用 IntelliJ IDEA 开发一般 Java 应用程序时配置 Allatori 进行代码混淆
			
使用 IntelliJ IDEA 开发一般 Java 应用程序时通过 Allatori 进行代码混淆非常容易配置,下面总结一下本人经验,介绍一下配置方法. 首先在 IDEA 的 Module 所在硬盘 ...
 - 小程序-支持的最小像素px
			
经过我手机多次测试,支持的最小px为: 8px;
 - Java 对象的序列化、反序列化
			
对象的序列化(Serialize):将内存中的Java对象转换为与平台无关的二进制流(字节序列),然后存储在磁盘文件中,或通过网络传输给另一个网络节点. 对象的反序列化(Deserialize):获取 ...