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 ...
随机推荐
- 大米网赚项目介绍，官方唯一客服QQ:486594009
大米平台项目来源 QQ:486594009 大米软件本质上是一个高质量网赚项目收集和发布平台,该平台的所有项目都是经过专业的测试团队实测有效的项目和教程,只要去做绝对可以赚钱.平台里面的项目类型包 ...
- jsp页面<%@ page报错问题
eclipse中的web项目jsp页面<%@报错如下图所示: 解决办法: 在项目上右键→ Build Path → Configure Build Path... Libraries → add ...
- element-ui的那些坑与总结
tags: 默认情况下,下划线是文本宽度 如果要加宽,则可以设置文本(label)的padding, 常规情况下,无法改label宽度,因为他是动态计算的 不过,可以通过自定义,把label拿出来,自 ...
- 【转载】安装 gephi 软件
作者:小小爽链接:https://www.zhihu.com/question/21268129/answer/354924066来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注 ...
- Dynamic learning rate in training - 培训中的动态学习率
I'm using keras 2.1.* and want to change the learning rate during training. I know about the schedul ...
- gridview单击选中勾选框
1.Dev2005版本: gridView1.OptionsBehavior.ShowEditorOnMouseUp = false;2.Dev2013版本: gridView1.OptionsBeh ...
- 高通 MSM8K bootloader之一： SBL1
MSM8K Boot Flow 转自:http://www.cnblogs.com/liang123/p/6325257.html http://blog.csdn.net/F ...
- Server Tomcat v7.0 Server at localhost failed to start.解决办法
今天,导入maven项目时,报的错,因为之前没遇到过这个错,一时抓不到头绪,最后请技术大神帮忙解决.他首先看的eclipse的配置,是否与项目对应,在看看.seting 文件中的名称是否与项目名对应, ...
- 阶段02JavaWeb基础day02&03JavaScript
javascript知识体系 ECMAScript javascript与html结合方式 内部: <script type="text/javaScript">*** ...
- struts拦截器的知识
如何使用struts2拦截器,或者自定义拦截器.特别注意,在使用拦截器的时候,在Action里面必须最后一定要引用struts2自带的拦截器缺省堆栈defaultStack,如下(这里我是引用了str ...