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 ...
随机推荐
- 【Luogu】P1430序列取数(DP)
题目链接 博弈DP太喵了qwq 设f[i][j]表示剩下区间[i,j]要取,先手最大值 明显我们要从这区间里面拿个最大的 就等价于这段区间的前缀和,我们要给对手留下个最小的 就是f[i][j]=sum ...
- Java面试题之Java中==和equals()和hashCode()的区别
“==”: ==是运算符,用来比较两个值.两个对象的内存地址是否相等: “equals()”: equals是Object类的方法,默认情况下比较两个对象是否是同一个对象,内部实现是通过“==”来实现 ...
- Discrete Logging(poj 2417)
高次同余方程. BL == N (mod P)求解最小的L. /* A^x=B(mod C) 设x=i*m-j(其中m=ceil(sqrt C)) 并且i∈[1,m],j∈[0,m],以保证x能取 ...
- Mysql之Handler_read%
纯属自己理解,如有误导概不负责O(∩_∩)O 加索引: mysql> flush status; Query OK, rows affected (0.00 sec) mysql> flu ...
- 模仿手机qq空间头部向上滚动颜色加深
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS函数调用原理($.ajax原理)
参考四种函数调用:http://www.cnblogs.com/qlqwjy/p/7660013.html http://www.cnblogs.com/qlqwjy/p/7660375.html 1 ...
- android 设置app root权限简单方法
vim frameworks/base/core/java/com/android/internal/os/ZygoteConnection.java +709 private static void ...
- 解决win2008下IIS7的HTTP500错误
造成500错误常见原因有:ASP语法出错.ACCESS数据库连接语句出错.文件引用与包含路径出错.使用了服务器不支持的组件如FSO等.另外,对于win2008的IIS默认不显示详细出错信息的问题以下就 ...
- R语言实战读书笔记(八)回归
简单线性:用一个量化验的解释变量预测一个量化的响应变量 多项式:用一个量化的解决变量预测一个量化的响应变量,模型的关系是n阶多项式 多元线性:用两个或多个量化的解释变量预测一个量化的响应变量 多变量: ...
- Go语言入门——数组、切片和映射(下)
上篇主要介绍了Go语言里面常见的复合数据类型的声明和初始化. 这篇主要针对数组.切片和映射这些复合数据类型从其他几个方面介绍比较下. 1.遍历 不管是数组.切片还是映射结构,都是一种集合类型,要从这些 ...