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 ...
随机推荐
- fatal error C1010: 在查找预编译头时遇到意外的文件结尾
错误描述:fatal error C1010: 在查找预编译头时遇到意外的文件结尾.是否忘记了向源中添加“#include "stdafx.h"”? 错误分析: 此错误发生 ...
- EVE-NG简单入门介绍
此篇文章简单的介绍下模拟器EVE-NG的使用,具体包括Dynamips设备导入与运行,IOL设备的导入与运行,QEMU设备的导入与运行,客户端软件的安装,物理网络与虚拟网络的结合等. 一．导入镜像 D ...
- JS a标签默认鼠标事件，导致无法修改input选中状态
今天踩了一个坑
- http/1.0/1.1/2.0与https的比较
HTTP是HyperText Transfer Protocol的缩写,译为超文本传输协议.是一种应用于OSI七层模型中应用层的协议,是我们平常互联网网络通信传输的基础.它的作用就是规定了服务器和客户 ...
- SpringBoot配置Swagger实例（POST接收json参数）
工程目录结构: 首先,引入jar包,只需要以下两个即可 <dependency> <groupId>io.springfox</groupId> <artif ...
- Elasticsearch安装部署教程
1)下载elasticsearch-1.1.2.zip 2)用ssh工具连接目录主机,在命令窗口输入:mkdir -p /opt/elasticsearch创建elasticsearch文件夹 3 ...
- python笔记25-sys模块
import sys#sys.argv命令行参数List,第一个元素是程序本身路径# sys.exit('xxxxx')#退出程序,正常退出时exit(0)# print(sys.version) # ...
- OO第一单元作业总结之初识面向对象
第一个单元的三次作业均为求导,循序渐进的让我们掌握如何构造类和方法,让整个代码是面向对象的设计而不是面向过程的设计.如果第一次作业和第二次作业你只是简单的对过程着手架构类,到了第三次作业就会变得格外麻 ...
- Sql Server 2012 集群配置
基于Windows Server 2008 R2的WSFC实现SQL Server 2012高可用性组(AlwaysOn Group) 2012年5月 微软新一代数据库产品SQL Server 201 ...
- RabbitMQ 的安装----Linux环境
CentOS7 安装RabbitMq 参考------> https://www.cnblogs.com/liaojie970/p/6138278.html https://www.cnbl ...