项目遇到需求有点奇葩:双击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 指令双向绑定的更多相关文章

  1. AngularJS中数据双向绑定(two-way data-binding)

    1.切换工作目录 git checkout step-4 #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-m ...

  2. AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4

    1.切换工作目录 git checkout step- #切换分支,切换到第4步 npm start #启动项目 2.代码 app/index.html Search: <input ng-mo ...

  3. angularJs实现数据双向绑定的原理

    angular1.x在指定的事件触发时(比如dom事件,xhr响应事件,浏览器定位变更事件,定时器事件),通过脏值检测的方式比对数据是否有变更,来决定是否更新视图. angular2使用了zone.j ...

  4. angularjs深入理解向指令传递数据,双向绑定机制

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  5. angularjs bind与model配合双向绑定 表达式方法输出

    <!doctype html><html lang="en"><head> <meta charset="UTF-8" ...

  6. 深入学习AngularJS中数据的双向绑定机制

    来自:http://www.jb51.net/article/80454.htm Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持 ...

  7. 数据双向绑定页面无反应(angularjs)

    问题引入 使用 angularjs进行过一段时间的开发后,基本上都会遇到一个这样的坑:页面进行了双向数据绑定,控制层的数据也已经改变了,但是视图层的数据却没有改变. 其实造成这个问题的原因大致分为以下 ...

  8. Angularjs 双向绑定机制解析

    文章转自:http://www.2cto.com/kf/201408/327594.html AngularJs 的元素与模型双向绑定依赖于循环检测它们之间的值,这种做法叫做脏检测,这几天研究了一下其 ...

  9. Angular系列----AngularJS入门教程05:双向绑定(转载)

    在这一步你会增加一个让用户控制手机列表显示顺序的特性.动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情. 请重置工作目录: git checkout -f ...

随机推荐

  1. 【Luogu】P3047附近的牛(树形DP)

    题目链接 树形DP,设f[i][j]是当前在i点,j步之内有多少牛.从相邻点to的f[to][j-1]转移而来,减去重复计算即可. #include<cstdio> #include< ...

  2. 【Luogu】P1903数颜色(带修改莫队)

    题目链接 带修改莫队模板. 加一个变量记录现在是第几次修改,看看当前枚举的询问是第几次修改,改少了就改过去,改多了就改回来. 话说我栈用成队列了能过样例?!!!! 从此深信一句话:样例是出题人精心设计 ...

  3. Editplus注册码,汉化官方版本

    官方认证Edit+简体中文版 https://www.editplus.com/download.html EditPlus注册码在线生成 http://www.jb51.net/tools/edit ...

  4. wireshark 找不到网卡的解决办法

    1. 以管理员身份打开CMD命令行 输入命令:net start npf C:\WINDOWS\system32>net start npf NetGroup Packet Filter Dri ...

  5. 标准C程序设计七---104

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  6. 标准C程序设计七---54

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  7. 在tomcat发布项目遇到的问题

    今天从SVN上把系统导入本地发生了异常,问题如下: java.math.BigInteger cannot be cast to java.lang.Long 百度一番后发现是因为使用Mysql8.0 ...

  8. hdu 1250(大整数)

    Hat's Fibonacci Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)T ...

  9. LeetCode OJ--Rotate List

    http://oj.leetcode.com/problems/rotate-list/ 取得后面k个节点,然后截断插到前面.如果k比list长,则按照求余算. 去后面的k个节点:使用两个指针,第一个 ...

  10. Delphi GDI对象之脱屏位图(Offscreen Bitmaps),也叫内存位图

    http://www.cnblogs.com/pchmonster/archive/2012/07/09/2583613.html 脱屏位图(Offscreen Bitmaps) 脱屏位图,也叫内存位 ...