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 ...
随机推荐
- 【Luogu】P2962灯Lights(折半搜索)
题目链接 本意是想学高斯消元,然后一顿乱搞之后学到了一个神奇的搜索方式叫做折半搜索. qwq 就是我先dfs前二分之n个点,然后再dfs后二分之n个点. 然后我dfs后二分之n个点的时候判断一下第一次 ...
- C# IEnumerable to List 的转换
一.使用Linq using System.Linq; Example: IEnumerable<, ); List<int> asList = enumerable.ToList( ...
- 聊聊 Spring Boot 2.0 的 WebFlux
聊聊 Spring Boot 2.0 的 WebFlux## 前言 对照下 Spring Web MVC ,Spring Web MVC 是基于 Servlet API 和 Servlet 容器设计的 ...
- CodeForces 333E. Summer Earnings
time limit per test 9 seconds memory limit per test 256 megabytes input standard input output standa ...
- 【CF1023B】Pair of Toys(解方程)
题意:给定n个玩具要你选出两个玩具求出k的价值,第i个玩具的价值为i.若是没有选择方案,输出0 补充:玩具A与玩具B 和 玩具B和玩具A 是同一种选择 n,k<=1e14 思路:列出式子,解不等 ...
- anaconda安装及环境变量配置
最近无聊想的学习一下python. 首先可以在官网上下载与自己电脑兼容的anaconda安装包,网址如下https://www.continuum.io/downloads 下载好后就是一个exe文件 ...
- 微信小程序 本地缓存保持登录状态之wx.setStorageSync()使用技巧
微信小程序提供了一个如同浏览器cookie本地缓存方法,那就是今天要说的wx.setStorageSync() 注意,该方法是同步请求,还有个异步请求的方法是wx.setStorage(),参考官方文 ...
- Codeforces 895E Eyes Closed(线段树)
题目链接 Eyes Closed 题意 两个人玩一个游戏,现在有两种操作: 1.两个人格子挑选一个区间,保证两个的区间不相交.在这两个区间里面各选出一个数,交换这两个数. 2.挑选一个区间,求这个 ...
- html的诸多标签
1.p和br标签 p表示段落,默认段落之间是有间隔的! br是换行 hr是一条水平线 2.a标签,超链接 <a href="http://www.baidu.com" tar ...
- 使用和不使用navigationbar分别处理显示和返回页面
不使用navigationbar的情况下 AnnounceViewController *pushView = [[AnnounceViewController alloc]init];pushVie ...