<!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. Nmap Snote

    Title:Nmap Snote --2011-11-15 21:28 用Nmap上瘾了,怕以后忘记,也就记一下. Nmap -v -sS -n -p1-65535 IP Nmap -v -sS -p ...

  2. Angularjs Scope 原型链

    我们知道scope是可以继承的.scope的继承和js原型链是同一个概念. <div ng-controller="parentCtrl"> {{name}} < ...

  3. php5,Apache在windows 7环境搭建

    主要是参考以下文章: http://www.cnblogs.com/Yogurshine/archive/2013/05/24/3097343.html http://jingyan.baidu.co ...

  4. 点击类名方法名如何连接到相应的Android源代码

    . 找到Android SDK所在路径 “D:\androidDev\android-sdk-windows\” . 在该目录下选择platforms到 “D:\androidDev\android- ...

  5. Android SDK下载和更新失败的解决方法！！！

    Failed to fetch URL http://dl-ssl.google.com/android/repository/addons_list-1.xml. 据说dl-ssl.google.c ...

  6. ACM2055_ctype.h_cctype

    #include<iostream> int main() { using namespace std; int y,count; char x; cin>>count; wh ...

  7. Oracle 表分析

    ANALYZE TABLE SeikyuTbl COMPUTE Statistics FOR TABLE FOR ALL COLUMNS FOR ALL INDEXES ; 一.优化器的优化方式 Or ...

  8. __device__ __global__ __host__

    __device__ 标记的函数从一个在器件中执行的函数呼叫,在器件中执行 __global__ 表示该函数从一个在主机中执行的函数呼叫,在器件中执行 __host__表示在主机中呼叫,在主机中执行的 ...

  9. [置顶] 对于最新的Android病毒，Smack完全可以抵御

    我写的有关Smack和Android系统结合的技术博客,希望有志之士可以参透其中奥妙,Smack作为Linux内核安全模块,已经可以移植到Android系统中,如果大家弄清我写的Smack安全策略,可 ...

  10. openflow tutorial 开始openflow的学习（一）

    首先不废话介绍openflow了,自己也还搞不清楚究竟是个什么玩意儿,概括不出什么内容来,先做试验,有个大体的感性了解回来再总结吧. 第一步,搭建环境,这一步就是安装工具,不同的系统环境搭建不一致,我 ...