AngularJS自定义表单控件
2015-07-05 23:36
615 查看
<!doctype html> <html ng-app="myApp"> <head> <script src="G:\\Source\\Repos\\GWD\\Gridsum.WebDissector.Website.ZC\\Gridsum.WebDissector.Website.ZC\\Pages\\dist\\assets\\lib\\angularjs\\angular.js"></script> <script type="text/javascript"> angular.module('myApp', []).directive('contenteditable', function () { return { require: 'ngModel', link: function (scope, elm, attrs, ctrl) { // view -> model elm.bind('blur', function () { scope.$apply(function () { ctrl.$setViewValue(elm.html()); }); }); // model -> view ctrl.$render = function (value) { elm.html(value); }; // load init value from DOM ctrl.$setViewValue(elm.html()); } }; }); </script> </head> <body> <div contenteditable="true" ng-model="content" title="Click to edit">Some</div> <pre>model = {{content}}</pre> <style type="text/css"> div[contentEditable] { cursor: pointer; background-color: #D0D0D0; } </style> </body> </html>
相关文章推荐
- AngularJS自定义表单验证器
- 使用AngularJs需要注意的事项
- AngularJS自定义表单验证
- AngularJS学习笔记1
- angularjs应用骨架
- AngularJs自定义指令详解(9) - terminal
- AngularJs自定义指令详解(8) - priority
- AngularJs自定义指令详解(7) - multiElement
- [Angularjs]视图和路由(一)
- 浅谈angularJS 作用域
- AngularJs自定义指令详解(6) - controller、require
- AngularJS表单验证操作例子分享
- 浅谈angularJS 作用域
- AngularJS Restangular插件的 customOperation 方法
- angularJS 作用域
- Angularjs简介
- AngularJS 最佳实践
- AngularJs创建自己的Grid–分页组件
- ionic之angular拦截器
- [Angularjs]ng-show和ng-hide