项目遇到需求有点奇葩:双击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. 【bzoj1925】[Sdoi2010]地精部落 组合数学+dp

    题目描述 传说很久以前,大地上居住着一种神秘的生物:地精. 地精喜欢住在连绵不绝的山脉中.具体地说,一座长度为 N 的山脉 H可分 为从左到右的 N 段,每段有一个独一无二的高度 Hi,其中Hi是1到 ...

  2. 【Luogu】P2634聪聪可可(树形DP)

    题目链接 水题,时限放得非常宽,暴力DP随便套上一波register就能卡过去. 唯一的遗憾是5A. 树形DP,s[i][j]表示以i为根的子树里距i的距离%3=j的点数,f[i]表示i为根的子树内一 ...

  3. Django notes I: collection of links to the Django document

    Links to the Django documents: the Django template language automatically generated context variable ...

  4. BZOJ1856 [SCOI2010]生成字符串 【组合数】

    题目 lxhgww最近接到了一个生成字符串的任务,任务需要他把n个1和m个0组成字符串,但是任务还要求在组成的字符串中,在任意的前k个字符中,1的个数不能少于0的个数.现在lxhgww想要知道满足要求 ...

  5. P2258 子矩阵 (搜索,动态规划)

    题目链接 Solution 搜索+DP. 刚好把搜索卡死的数据范围... 然后应该可以很容易想到枚举行的情况,然后分列去DP. 行的情况直接全排列即可,复杂度最高 \(O(C_{16}^{8})\). ...

  6. ApplicationContext,WebApplicationContext

    servletContext 是web应用程序的大环境,用于存储整个web应用程序级别的对象. ApplicationContext,WebApplicationContext 是Spring的Bea ...

  7. 开源 project

    移动:http://www.csdn.net/article/2014-04-22/2819435-facebook-mobile-open-source-projects/1

  8. 【CF1016A】Death Note(签到)

    题意:无限页的书,每页可以写m个名字,给你一个长度为n的序列,序列为你每天要写的名字数,输出你每天要翻的页数. n<=2e5,m,a[i]<=1e9 思路: #include<cst ...

  9. Linux Malloc分析-从用户空间到内核空间【转】

    转自:http://blog.csdn.net/ordeder/article/details/41654509 版权声明:本文为博主(http://blog.csdn.net/ordeder)原创文 ...

  10. 诡异的malloc函数和%S的输出

    今天测试代码过程中无意间发现,代码如下: #include <stdio.h> #include <string.h> #include <stdlib.h> #d ...