angularJs自定义指令.directive==类似自定义标签
创建自定义的指令
除了 AngularJS 内置的指令外，我们还可以创建自定义指令。
你可以使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
使用驼峰法来命名一个指令， runoobDirective, 但在使用它时需要以 - 分割, runoob-directive:
restrict 值可以是以下几种:
E作为元素名使用A作为属性使用C作为类名使用M作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
例1 restrict指令==hello指令
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp">
<hello></hello><!-- E元素 -->
<div class="hello"></div><!-- C样式 -->
<div hello></div><!-- A属性 -->
<!-- directive:hello --><!-- M注释 -->
<script>
var app = angular.module("myApp", []);
app.directive("hello", function() {
return {
restrict : "ACEM",//A属性 C样式 E元素 M注释
replace : true,
template : "<h1>自定义指令222!</h1>"
};
});
</script>
</body>
</html>
angularJs自定义指令.directive==类似自定义标签的更多相关文章
- angularjs - 自定义指令(directive)
自定义指令(directive) 使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 例子:使用驼峰法来命名一个指令, demoDirect ...
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- vue从入门到进阶：自定义指令directive，插件的封装以及混合mixins（七）
一.自定义指令directive 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令.注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件.然而,有的 ...
- Vue input 控件: 通过自定义指令(directive)使用正则表达式限制input控件的输入
前言: 网站中的input输入框使用非常广泛,因业务场景不同需要对输入框做合法性校验或限制输入,比如电话号码.邮件.区号.身份证号等.input框的不合法内容主要有两种方式处理:1.用户输入内容后,通 ...
- AngularJS自定义指令directive：scope属性 （转载）
原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
- angularjs 一篇文章看懂自定义指令directive
壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...
- angular 自定义指令 directive transclude 理解
项目中断断续续的用了下angular,也没狠下心 认真的学习.angular 特别是自定义指令这块 空白. transclude 定义是否将当前元素的内容转移到模板中.看解释有点抽象. 看解释有点抽象 ...
- Angular自定义指令directive:scope属性
在AngularJS中,除了内置指令如ng-click等,我们还可以自定义指令.自定义指令,是为了扩展DOM元素的功能.代码中,通过指定directive中的restrict属性,来决定这个指令是作为 ...
- 自定义指令directive
1.自定义指令 在angular中,module下面的directive方法用于创建自定义指令,用法: m1.directive('myTab',function(){ return { restri ...
随机推荐
- Hadoop核心组件
1.Hadoop生态系统 2.HDFS(Hadoop分布式文件系统) 源自于Google的GFS论文,发表于2003年10月,HDFS是GFS克隆版. 是Hadoop体系中数据存储管理的基础.它是一个 ...
- android-async-http cancelRequests
github地址:https://github.com/loopj/android-async-http 使用上:官方建议使用一个静态的AsyncHttpClient: 1.AsyncHttpClie ...
- objective-c 多线程注意的问题
1.资源竞争:当每个线程都去访问同一段内存时,会导致所谓i资源竞争问题,这时候可以通过“@synchronized block”将实例变量包围起来,创建一个互斥锁, 这样你就可以确保在互斥锁中的代码一 ...
- BZOJ 1008 题解
1008: [HNOI2008]越狱 Time Limit: 1 Sec Memory Limit: 162 MBSubmit: 7845 Solved: 3359[Submit][Status] ...
- App如何适应 iPhone 5s/6/6 Plus 三种屏幕的尺寸？
来自//www.cocoachina.com/ 初代 iPhone 2007 年,初代 iPhone 发布,屏幕的宽高是 320 x 480 像素.下文也是按照宽度,高度的顺序排列.这个分辨率一直到 ...
- FMS Camera对象设置说明
目录: 1.setQuality(Camera.setQuality方法)2.quality(Camera.quality属性)3.setMode(Camera.setMode方法)4.onActiv ...
- PHP 进行数据庫对比工具
<?php /** * author jackluo * net.webjoy@gmail.com */ class IMysqlDiff { private $master,$slave; p ...
- [LintCode] Scramble String 爬行字符串
Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrin ...
- Maya 脚本控制物体自转
在Maya中,我们可以用脚本来控制物体的自转方向,速度等等,步骤如下: 选择需要操作的物体object,打开通道盒Channel Box,点击编辑Edit,打开表达式Expressions面板 选择需 ...
- Window.document对象 轮播练习
Window.document对象 一.找到元素: docunment.getElementById("id"):根据id找,最多找一个: var a =docun ...