angularjs - 自定义指令(directive)
自定义指令(directive)
使用 .directive 函数来添加自定义的指令。
要调用自定义指令，HTML 元素上需要添加自定义指令名。
例子：使用驼峰法来命名一个指令， demoDirective, 但在使用它时需要以 - 分割, demo-directive:
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0'/>
<title>自定义指令（directive）的简单demo</title>
</head>
<body ng-app="myApp">
<h3>自定义指令（directive）</h3>
<hr>
<h4>自定义指令的四种调用方式：</h4>
元素名调用： <demo-directive></demo-directive>
属性调用：<div demo-directive></div>
<pre>
元素名与属性控制的js代码：
var app = angular.module("myApp", []);
app.directive("demoDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</pre>
类名调用：<div class="demo-directive"></div>
<pre>
类名控制的js代码：
var app = angular.module("myApp", []);
app.directive("demoDirective", function() {
return {
restrict : "C",
template : "<h1>自定义指令!</h1>"
};
});
</pre>
注释调用：<!-- directive: demo-directive -->
<pre>
注释控制的js代码：
var app = angular.module("myApp", []);
app.directive("demoDirective", function() {
return {
restrict : "M",
replace : true,
template : "<h1>自定义指令!</h1>"
};
});
</pre>
<script type="text/javascript" src="https://code.angularjs.org/1.7.5/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.directive("demoDirective", function() {
return {
template : "<h1>自定义指令!</h1>"
};
});
</script>
</body>
</html>
自定义指令的限制使用：你可以限制你的指令只能通过特定的方式来调用。
restrict 值可以是以下几种:
E 作为元素名使用
A 作为属性使用
C 作为类名使用
M 作为注释使用
restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
angularjs - 自定义指令(directive)的更多相关文章
- angularjs自定义指令Directive
今天学习angularjs自定义指令Directive.Directive是一个非常棒的功能.可以实现我们自义的的功能方法. 下面的例子是演示用户在文本框输入的帐号是否为管理员的帐号"Adm ...
- angularJs自定义指令.directive==类似自定义标签
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名 ...
- AngularJS自定义指令directive：scope属性 （转载）
原文地址:http://blog.csdn.net/VitaLemon__/article/details/52213103 一.介绍: 在AngularJS中,除了内置指令如ng-click等,我们 ...
- AngularJS 自定义指令directive 介绍
--------------------------------------------------------------------------- 指令的作用是把我们自定义的语义化标签替换成浏览器 ...
- angularjs 一篇文章看懂自定义指令directive
壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...
- AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16.下载地址:http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js 既然AngularJs快要发布 ...
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 浅析AngularJS自定义指令之嵌入(transclude)
AngularJS自定义指令的嵌入功能与vue的插槽十分类似,都可以实现一些自定义内容展现.在开始之前先简单介绍下自定义指令的transclude属性和AngularJS的内置指令ng-transcl ...
- angularJs 自定义指令传值---父级与子级之间的通信
angularJs自定义指令用法我忽略,之前有写过,这里只说一下父子级之间如何传值: 例如: 模块我定义为myApp,index.html定义 <my-html bol-val="bo ...
随机推荐
- Rhino学习教程——1.3
在主工具栏的工作视窗配置一栏中,有一个背景图工具. 展开是: . 功能是: 放置背景图 移除背景图 移动背景图 缩放背景图 对齐背景图 隐藏背景图/显示背景图 用“图框平面”工具 也可以导入一个图片 ...
- EXTENDED LIGHTS OUT
In an extended version of the game Lights Out, is a puzzle with 5 rows of 6 buttons each (the actual ...
- java课堂笔记4
- mybatis调用存储过程，获取返回的游标
将调用存储过程参数放入map中,由于返回的游标中包含很多参数,所以再写一个resultmap与之对应,类型为hashmap.设置返回的jdbcType=CURSOR,resultMap设置为id对应的 ...
- sqoop碰到的问题
sqoop碰到的问题 背景:从Oracle接入数据,一张表一千多万,数据量13G左右. 报错,表名找不到,将表名改成大写的 Exception in thread "main" j ...
- Python全栈day9习题
本内容主要为If条件语句和while循环的相关知识. 一.使用while循环输入1 2 3 4 5 6 8 9 10 i = 1 while i < 11: if i == 7: pass el ...
- MYSQL+PHP的学习之路
MYSQL+PHP 先从MYSQL开始吧 第一步:SQL语句基础 1.书籍 2.网站: 这个网站在线测试和考试http://sqlzoo.net/wiki/SELECT_basics/zh 3.学习过 ...
- java基础知识—数组
1.数组:是一个变量,存储相同数据类型的一组数据. 2.数据的优点:减少代码量.易查找. 3.数组的使用步骤: 1)声明数组:int scores []: 2)开辟空间:scores = new in ...
- CentOS 6 RPM安装包下载地址
32位系统的RPM安装包的下载地址 http://mirrors.163.com/centos/6/os/i386/Packages/ 64位系统的RPM安装包的下载地址 http://mirrors ...
- c/c++ include 头文件的方式
在编写c/c++代码时,#include 头文件有两种方式:一个是#include “文件名”,一个是#include <文件名>.区别在于: 前者在程序编译时系统首先在源程序所在的目录( ...