<!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. Big Data Security Part One: Introducing PacketPig

    Series Introduction Packetloop CTO Michael Baker (@cloudjunky) made a big splash when he presented ‘ ...

  2. win7 snmp

    http://blog.chinaunix.net/uid-21857285-id-3340206.html

  3. curl http认证

    有些站点需要http认证.(apache认证:http://blog.csdn.net/zf213/article/details/4252592) 如果访问http://test:123789@xx ...

  4. 【转】java读写二进制文件的解决方法

    原文网址:http://www.jb51.net/article/36940.htm 接口:Writerable 复制代码代码如下: package com.geoway.pad.common; im ...

  5. android调用系统自带的的浏览器搜索关键字

    //调用系统的浏览器搜索详情 public void jumpBrowser(String value) { /* 取得网页搜寻的intent */ Intent search = new Inten ...

  6. Java如何让异常处理机制更完备规范

    1)catch的Exception一定要详细的点名是某种异常而非一概而论的用Exception ex来接收所有的异常,往往不理解这点的人也不能很好的理解catch的意义到底在哪里,是对捕获的异常进行一 ...

  7. Apache HttpClient组件封装工具类

    package com.mengyao.spider.utils; import java.util.ArrayList;import java.util.HashMap;import java.ut ...

  8. [置顶] API相关工作过往的总结之整体介绍

    此系列的总结文章,仅仅是我个人工作总结,有考虑不周之处还请各位同行多多指教. API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是 ...

  9. java类的加载顺序

    related URL: http://www.cnblogs.com/guoyuqiangf8/archive/2012/10/31/2748909.html Parent Class: packa ...

  10. eclipse tomcat 网页404的一个小问题

    之前一篇文章说过关于修改tomcat布置的应用的localhost路径.因为有两个项目在eclipse,所以我每次启动tomcat的时候都会加载两个项目, 但我其实只用调试其中一个项目,所以我就在se ...