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 ...
随机推荐
- Eclipse项目类型转换
例如,将一个普通java项目改为动态Web项目: 在eclipse的项目上点右键,刷新项目. 在项目上点右键,进入属性(properties) 在左侧列表项目中点击选择“Project Facets” ...
- 实时监控linux
https://www.cnblogs.com/tinywan/p/6826125.html
- 添加gitlab远程账号 使用注意事项
gitlab上面使用的密钥有两种,一种是Deploy keys 这种密钥是只读的,添加了之后,相应设备只拥有clone的权限,不被允许进行push操作.(在相应的库里面的设置里面添加) 还有一种是 S ...
- hdu 2888 二维RMQ
Check Corners Time Limit: 2000/10000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)To ...
- 【CF713C】Sonya and Problem Wihtout a Legend(离散化,DP)
题意:给你一个数列,对于每个数字你都可以++或者−− 然后花费就是你修改后和原数字的差值,然后问你修改成一个严格递增的,最小花费 思路:很久以前做过一道一模一样的 严格递增很难处理,就转化为非严格递增 ...
- error C2253: pure specifier or abstract override specifier only allowed on virtual
1.用Visual Studio 2012编译下面代码时出现的错误: #define RTC_DISALLOW_COPY_AND_ASSIGN(TypeName) \ TypeName(const T ...
- 转 Centos下安装apahce的configure: error: APR not found. Please read the documentation解决办法
转自: http://www.cnblogs.com/Anker/p/3355573.html 今天从Apache官网上http://httpd.apache.org/下载httpd web服务器,由 ...
- react-hot-loader 的配置【局部刷新】--{create-react-app}
安装 1.安装create-react-app npm install -g create-react-app 2.创建项目 create-react-app my-app 配置 1.弹出配置文件 n ...
- VUE2.0 【v-html】标签使用技巧
<div class="active-rules"> <div class="weui-weixin-content" id="ru ...
- Debian9安装MariaDB
一:导入密钥并添加了存储库 sudo apt-get install software-properties-common dirmngr sudo apt-key adv --recv-keys - ...