<!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. android上传图片至服务器

    本实例实现了android上传手机图片至服务器,服务器进行保存 服务器servlet代码publicvoid doPost(HttpServletRequest request, HttpServle ...

  2. 关于标准C语言的预定义宏

    标准C语言预处理要求定义某些对象宏,每个预定义宏的名称一两个下划线字符开头和结尾,这些预定义宏不能被取消定义(#undef)或由编程人员重新定义.下面预定义宏表,被我抄了下来.__LINE__  当前 ...

  3. office web apps server 问题和解决办法

    New-OfficeWebAppsFarm –InternalURL "http://owa.zjkhlib.com" –AllowHttp –EditingEnabled 错误1 ...

  4. 在Windows Azure上配置VM主备切换（1）——Linux篇

    对任何一个上线系统来说,高可用设计是不可或缺的一个环节,这样才可以确保应用可以持续.稳定的运行,而不是频繁的掉线.停机.高可用设计的核心思路很简单,就是消除一切单点故障,将单点链路或者节点升级为多点. ...

  5. CSS 入门

    以下内容均来自 慕课网 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等 ...

  6. Python NTLK资料

    1.Creating a new corpus with NLTK http://stackoverflow.com/questions/4951751/creating-a-new-corpus-w ...

  7. Oracle_Q&A_02

    Step02: Import SQL FILE Step02: QUESTION & ANSWER --1查询员工姓名和职位字数相等的员工 --2查询e_name以s结尾的员工(不用like) ...

  8. SOFTWARE_INTRODUCE_01

    &amp;amp;amp;amp;lt;br data-mce-bogus="1"&amp;amp;amp;amp;gt;&amp;amp;amp;amp; ...

  9. 对Ul下的li标签执行点击事件——如何获取你所点击的标签

    问题所来:做项目时,一般的数据都是用循环动态加载出来的,结构都是一样的,只是绑定的值不同,如何对相同的标签做处理的问题就来了. 例如:点谁就显示谁的数值 <ul > <li id=& ...

  10. mongodb授权登录

    mongodb版本为3.2(目前最新),演示的是linux下的mongodb授权认证 第一次登录不启动授权(mongo默认不启动) ./mongod --dbpath=/home/db/data -- ...