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 ...
随机推荐
- CSS3的writing-mode属性
writing-mode这个CSS属性以前是IE的独有属性,IE5.5浏览器就已经支持了.在很长一段时间里,FireFox, Chrome这些现代浏览器都不支持writing-mode,各大现代浏览器 ...
- BZOJ1064 [Noi2008]假面舞会 【dfs】
题目 一年一度的假面舞会又开始了,栋栋也兴致勃勃的参加了今年的舞会.今年的面具都是主办方特别定制的.每个参加舞会的人都可以在入场时选择一 个自己喜欢的面具.每个面具都有一个编号,主办方会把此编号告诉拿 ...
- BZOJ2333 [SCOI2011]棘手的操作 【离线 + 线段树】
题目 有N个节点,标号从1到N,这N个节点一开始相互不连通.第i个节点的初始权值为a[i],接下来有如下一些操作: U x y: 加一条边,连接第x个节点和第y个节点 A1 x v: 将第x个节点的权 ...
- 线程与threading模块
线程 进程内一个相对独立的.可调度的执行单元,是系统独立调度和分派CPU的基本单位.在单个进程中同时运行多个线程完成不同的工作,称为多线程. 同一进程内的多个线程是共享该进程的资源. 创建新的线程开销 ...
- bzoj 3208 花神的秒题计划I
bzoj 3208 花神的秒题计划I Description 背景[backboard]: Memphis等一群蒟蒻出题中,花神凑过来秒题-- 描述[discribe]: 花花山峰峦起伏,峰顶常年被雪 ...
- 防止点击asp.net的button按钮刷新页面(保留button的外观)
原文发布时间为:2008-08-06 -- 来源于本人的百度文章 [由搬家工具导入] Button btn=new Button(); 1、如果用 btn.Enabled=false;是可以防止刷新的 ...
- Z-Order(转)
原文转自 http://www.th7.cn/system/win/201406/60715.shtml 窗口在子窗口链中的先后顺序也就是窗口在屏幕上显示时的前后顺序,在子窗口链里位置越靠前的窗口显示 ...
- buffer和cache怎么让你们解释的那么难理解?
对于一个即将踏上“系统运维”或者更加高大尚的工作“系统调优”,如果这不跟这两哥们搞好关系了,坑的不只有内存,更坑的是你拿着调优的钱却干着随时被调的活.因为作为一个系统运维人员来说监控和优化IO性能这是 ...
- 在线扩展根分区 red hat 4.8.3-9
跑程序的时候发现报错,提示空间不足,仔细查看后发现是根分区已满 27G的空间只有20k剩余 考虑从/data分区压缩一点空间到/分区 切换到root用户 执行下面的命令 1. umount /data ...
- Java 实现随机验证码
许多系统的注册.登录或者发布信息模块都添加的随机码功能,就是为了避免自动注册程序或者自动发布程序的使用. 验证码实际上就是随机选择一些字符以图片的形式展现在页面上,如果进行提交操作的同时需要将图片上的 ...