<!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自定义表单控件的更多相关文章

  1. Angular19 自定义表单控件

    1 需求 当开发者需要一个特定的表单控件时就需要自己开发一个和默认提供的表单控件用法相似的控件来作为表单控件:自定义的表单控件必须考虑模型和视图之间的数据怎么进行交互 2 官方文档 -> 点击前 ...

  2. angular 响应式自定义表单控件—注册头像实例

    1. 组件继承ControlValueAccessor,ControlValueAccessor接口需要实现三个必选方法 writeValue() 用于向元素中写入值,获取表单的元素的元素值 regi ...

  3. Angular：自定义表单控件

    分享一个最近写的支持表单验证的时间选择组件. import {AfterViewInit, Component, forwardRef, Input, OnInit, Renderer} from & ...

  4. MVC树控件,mvc中应用treeview，实现复选框树的多层级表单控件

    类似于多层级的角色与权限控制功能,用MVC实现MVC树控件,mvc中应用treeview,实现复选框树的多层级表单控件.最近我们的项目中需要用到树型菜单,以前使用WebForm时,树型菜单有微软提供的 ...

  5. Vue.js学习笔记——表单控件实践

    最近项目中使用了vue替代繁琐的jquery处理dom的数据更新,个人非常喜欢,所以就上官网小小地实践了一把. 以下为表单控件的实践,代码敬上,直接新建html文件,粘贴复制即可看到效果~ <! ...

  6. C#中缓存的使用 ajax请求基于restFul的WebApi(post、get、delete、put) 让 .NET 更方便的导入导出 Excel .net core api +swagger(一个简单的入门demo 使用codefirst+mysql) C# 位运算详解 c# 交错数组 c# 数组协变 C# 添加Excel表单控件（Form Controls） C#串口通信程序

    C#中缓存的使用   缓存的概念及优缺点在这里就不多做介绍,主要介绍一下使用的方法. 1.在ASP.NET中页面缓存的使用方法简单,只需要在aspx页的顶部加上一句声明即可:  <%@ Outp ...

  7. 认识HTML中表格、列表标签以及表单控件

    前端之HTML,CSS(二) HTML标签 列表标签 无序列表:闭标签,由<ul><li></li>...</ul>组合而成,效果成纵向列表.格式:&l ...

  8. 仿苹果电脑任务栏菜单&&拼图小游戏&&模拟表单控件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. HTML入门（列表、表单、常用表单控件、浮动框架、iframe、 摘要与细节、度量标签）

    一.列表 1.作用:默认显示方式为从上到下的显示数据 2.列表的组成 列表类型和列表项 3.列表的分类:有序列表   无序列表   自定义列表 无序列表语法为ul>li, 语法:ul代表列表,l ...

随机推荐

  1. vim下编写html的超级利器emmet

    GitHub:里面有详细的文档说明 https://github.com/mattn/emmet-vim 下载地址: http://www.vim.org/scripts/script.php?scr ...

  2. Android之GPS应用开发

    LocationManager--------------->Context.LOCATION_SERVICE LocationProvider--------------->Locati ...

  3. Android上传文件之FTP

    android客户端实现FTP文件(包括图片)上传应该没什么难度.写下来就了为了记录一下,望能帮到新手. 需要用到 commons-net-3.0.1.jar,后面附上jar包. 直接上代码: /** ...

  4. C++11之后，对源代码增加了UTF8和UCS4的支持（Windows内部使用Unicode，因为nt内核用的是ucs2，那是89年，utf8到了92年才发明出来）

    在C++编程中, 我们常打交道的无非是编辑器和编译器, 对编辑器起来说,我们常遇到就是乱码问题, 比如中文注释显示或是保存不了等, 解决办法就是把你的文件保存成Unicode(UTF8). 对于编译器 ...

  5. C语言的一个关键字——static

      Static在C语言里面有两个作用,第一个是修饰变量,第二个是修饰函数. 1.Static修饰变量 按照作用范围的不同,变量分为局部变量和全局变量.如果用static修饰变量,不论这个变量是全局的 ...

  6. HDOJ 1303 Doubles(简单题)

    Problem Description As part of an arithmetic competency program, your students will be given randoml ...

  7. 转载：SQL Server高效 -- 设计（ITPUT 讨论汇总

    http://blog.csdn.net/zjcxc/article/details/8979756 认为在设计SQL Server对象时,主要会考虑哪些因素来避免出现性能问题? 讨论汇总——总体设计 ...

  8. hdu2444The Accomodation of Students

    思路: 二分图判断+最大匹配模板 二分图判断的方法很好想,没有离散的基础凭空给你个图让你判断也很容易想到染色法,简单的介绍下就是用queue来做,标记一个点为x则他所有的邻点都为x',然后递归的执行下 ...

  9. HDFS Federation与HDFS High Availability详解

    HDFS Federation NameNode在内存中保存文件系统中每个文件和每个数据块的引用关系,这意味着对于一个拥有大量文件的超大集群来说,内存将成为限制系统横向扩展的瓶颈.在2.0发行版本系列 ...

  10. Python学习日志（六）

    字符串的方法及注释 字符串转义字符含义 字符串格式化符号含义 eg:'a'的ASCii码是97 格式化操作符辅助指令 format()字符串格式化方法 字符串的格式化是指统一字符串格式 format( ...