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 ...
随机推荐
- HTTPS, SPDY和 HTTP/2性能的简单对比
中文原文:HTTPS, SPDY和 HTTP/2性能的简单对比 整理自:A Simple Performance Comparison of HTTPS, SPDY and HTTP/2 请尊重版权, ...
- Codeforces Round #216 (Div. 2)A. Valera and Plates
#include <iostream> using namespace std; int main(){ int n, m , k; cin >> n >> m & ...
- 洛谷 洛谷 P1011 车站 Label：续命模拟QAQ 未知50分
题目描述 火车从始发站(称为第1站)开出,在始发站上车的人数为a,然后到达第2站,在第2站有人上.下车,但上.下车的人数相同,因此在第2站开出时(即在到达第3站之前)车上的人数保持为a人.从第3站起( ...
- NOIP 2005 等价表达式 (TYVJ P1060)
做题记录: 2016-08-10 23:35:09 背景 NOIP2005 提高组 第四道 描述 明明进了中学之后,学到了代数表达式.有一天,他碰到一个很麻烦的选择题.这个题目的题干中首先给出了一个代 ...
- jQuery中的Ajax几种请求方式
1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中. url (String) : 请求的HTML页的URL地址. data (M ...
- C语言（4）
C语言(4)--数据类型 C语言在用“/”是,注意左右两边都是整数时,商也是只有整数部分. 下面介绍一下C语言常用的数据类型: 注意: 1.char类型数据范围:256中字符. 2.float和do ...
- About_AJAX
Asynchronous JavaScript And XML (1)AJAX大多用于验证和分页: (2)首先要激活(对象): window.ActiveXObject(针对IE): window.X ...
- Maven dependency spring-web vs spring-webmvc
<dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmv ...
- javaweb之框架标签(day1 框架标签的使用)
框架标签 <frameset> --rows:按照行进行划分<frameset rows='80,*'> --rows:按照列进行划分<frameset cols='80 ...
- 【androidstudio】将eclipse的项目导入android studio
一.概述 最近正在实习公司迭代一个app,项目工程比较大,依赖的第三方服务.第三方库较多,比较复杂.因为公司项目一直是在ec上写的,没有android studio的版本.而大家都知道ec写代码远没有 ...