项目遇到需求有点奇葩:双击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】P2962灯Lights(折半搜索)

    题目链接 本意是想学高斯消元,然后一顿乱搞之后学到了一个神奇的搜索方式叫做折半搜索. qwq 就是我先dfs前二分之n个点,然后再dfs后二分之n个点. 然后我dfs后二分之n个点的时候判断一下第一次 ...

  2. C# IEnumerable to List 的转换

    一.使用Linq using System.Linq; Example: IEnumerable<, ); List<int> asList = enumerable.ToList( ...

  3. 聊聊 Spring Boot 2.0 的 WebFlux

    聊聊 Spring Boot 2.0 的 WebFlux## 前言 对照下 Spring Web MVC ,Spring Web MVC 是基于 Servlet API 和 Servlet 容器设计的 ...

  4. CodeForces 333E. Summer Earnings

    time limit per test 9 seconds memory limit per test 256 megabytes input standard input output standa ...

  5. 【CF1023B】Pair of Toys(解方程)

    题意:给定n个玩具要你选出两个玩具求出k的价值,第i个玩具的价值为i.若是没有选择方案,输出0 补充:玩具A与玩具B 和 玩具B和玩具A 是同一种选择 n,k<=1e14 思路:列出式子,解不等 ...

  6. anaconda安装及环境变量配置

    最近无聊想的学习一下python. 首先可以在官网上下载与自己电脑兼容的anaconda安装包,网址如下https://www.continuum.io/downloads 下载好后就是一个exe文件 ...

  7. 微信小程序 本地缓存保持登录状态之wx.setStorageSync()使用技巧

    微信小程序提供了一个如同浏览器cookie本地缓存方法,那就是今天要说的wx.setStorageSync() 注意,该方法是同步请求,还有个异步请求的方法是wx.setStorage(),参考官方文 ...

  8. Codeforces 895E Eyes Closed(线段树)

    题目链接  Eyes Closed 题意  两个人玩一个游戏,现在有两种操作: 1.两个人格子挑选一个区间,保证两个的区间不相交.在这两个区间里面各选出一个数,交换这两个数. 2.挑选一个区间,求这个 ...

  9. html的诸多标签

    1.p和br标签 p表示段落,默认段落之间是有间隔的! br是换行 hr是一条水平线 2.a标签,超链接 <a href="http://www.baidu.com" tar ...

  10. 使用和不使用navigationbar分别处理显示和返回页面

    不使用navigationbar的情况下 AnnounceViewController *pushView = [[AnnounceViewController alloc]init];pushVie ...