项目遇到需求有点奇葩:双击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. kb-07-RMQ线段树--07(动态规划)

    RMQ是一类解决区间最值查询的算法的通称:.一共有四类:在代码中有说明: 下面是ST算法,就是动态规划做法: 来看一下ST算法是怎么实现的(以最大值为例): 首先是预处理,用一个DP解决.设a是要求区 ...

  2. 学习 JSP:第三步 JSP基础(未完)

    因为之前学过也用过JSP,这里只列出笔记,初学者请移步其他教程. JSP隐含对象 JSP支持九个自动定义的变量,江湖人称隐含对象.这九个隐含对象的简介见下表: 对象 描述 request HttpSe ...

  3. hdu 4400 离散化+二分+BFS(暴搜剪枝还超时的时候可以借鉴一下)

    Mines Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Subm ...

  4. 【CF56E】Domino Principle(线性扫描,伪DP)

    每块多米诺骨牌所在的位置设为x,每块多米诺骨牌高度为h.如果将x位置上的多米诺骨牌向右翻到,它就可以影响[x+1, x+h-1]范围内的所有多米诺骨牌,让他们也翻到,同时这些被翻到的多米诺骨牌还能影响 ...

  5. Yii CActiveForm 客户端验证(enableClientValidation)和自定义验证

    使用Yii的CActiveForm默认使用服务器端模型(model)的rules规则验证数据. 但这会导致无谓的请求提交,比较好的方式是为了用户体验在客户端也验证,而为了安全性,在服务器端和数据库也做 ...

  6. AC日记——乘积最大 洛谷 P1018

    题目描述 今年是国际数学联盟确定的“2000――世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场别开生面的数学智力竞赛的活动,你的一个好朋友XZ也有幸得 ...

  7. 图片点击放大并可点击旋转插件(1)-jquery.artZoom.js

    1.首先加入链接: <script type="text/javascript" src="js/jquery-1.6.1.min.js">< ...

  8. (1)JavaScript基础1

    一.javaScript 由三部分组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 二.在html中使用javascript HTML5模板 <! ...

  9. Netty-----初探

    今天看gateway 实现的时候看到个哥们基于的netty实现的gateway.so,解析一下Netty. 废话少说,maven pom 引入,down 下jar包.看了下netty的包结构,还是挺明 ...

  10. 微信小程序提交 webapi FormDataCollection

    /// <returns></returns> [HttpPost] public ShoppingCartModel UpdateCart(FormDataCollectio ...