【AngularJS】—— 8 自定义指令
AngularJS支持用户自定义标签属性,在不需要使用DOM节点操作的情况下,添加自定义的内容。
前面提到AngularJS的四大特性:
1 MVC
2 模块化
3 指令
4 双向数据绑定
下面将会介绍如下的内容:
1 如何自定义指令
2 自定义指令的使用
3 自定义指令的内嵌使用
如何自定义指令:
Angular是基于模块的框架,因此上来肯定要创建一个自己的模块:
var myAppModule = angular.module("myApp",[]);
然后在此模块基础上创建指令directive
myAppModule.directive("xingoo",function(){
return{
restrict:'AECM',
template:'<div>hello my directive</div>',
replace:true
}
});
其中,xingoo是我们自定义标签的名字,后面跟着它的方法函数。
函数return了一个键值对组合,其中定义了标签的使用方法、属性等等内容。
那么看看它都定义了哪些内容吧:
1 restrict:定义了标签的使用方法,一共四种,分别是AECM
2 template:定义标签的模板。里面是用于替换自定义标签的字符串
3 replace:是否支持替换
4 transclude:是否支持内嵌
如何使用指令:
上面提到了标签的四种使用方法,即AECM。
A attribute属性:当做属性来使用
<div xingoo></div>
E element元素:当做标签元素来使用
<xingoo></xingoo>
C class类:当做CSS样式来使用
<div class="xingoo"></div>
M comments注释:当做注释使用(这种方式在1.2版本下亲测不可用!)
<!-- directive:xingoo -->
<div></div>
一般来说推荐,当做属性和元素来使用。
当想要在现有的html标签上扩展属性时,采用属性的方式。
当想要自定义标签时,采用标签的形式。
想要使用那种方式,必须要在定义directive中的restrict里面声明对应的字母。
指令的内嵌使用:
因为标签内部可以嵌套其他的标签,因此想要在自定义标签中嵌套其他的元素标签,则需要:
1 使用transclude属性,设置为true。
2 并使用ng-transclude属性,定义内部嵌套的位置。
代码如下:
myAppModule.directive("test",function(){
return{
restrict:'AECM',
transclude:true,
template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
}
});
全部代码
<!doctype html>
<html ng-app="myApp">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
</head>
<body> <xingoo></xingoo>
<div xingoo></div>
<div class="xingoo"></div>
<!-- directive:xingoo -->
<div></div>
<hr>
<xingoo>3333</xingoo>
<hr>
<test>4444</test> <script type="text/javascript">
var myAppModule = angular.module("myApp",[]); myAppModule.directive("xingoo",function(){
return{
restrict:'AECM',
template:'<div>hello my directive</div>',
replace:true
}
}); myAppModule.directive("test",function(){
return{
restrict:'AECM',
transclude:true,
template:"<div>haha! <div ng-transclude></div> wuwu!</div>"
}
});
</script>
</body>
</html>
运行结果
【AngularJS】—— 8 自定义指令的更多相关文章
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- AngularJS笔记--自定义指令
在前端开发中, 我们会遇到很多地方都会用到同一种类型的控件.AngularJS提供了自定义指令功能,我们可以在指令里面定义特定的html模板.提供给前台html调用. 一. 指令的简单定义. 下面定 ...
- 走进AngularJs(五)自定义指令----(下)
自定义指令学习有段时间了,学了些纸上谈兵的东西,还没有真正的写个指令出来呢...所以,随着学习的接近尾声,本篇除了介绍剩余的几个参数外,还将动手结合使用各参数,写个真正能用的指令出来玩玩. 我们在自定 ...
- 走进AngularJs(三)自定义指令-----(上)
一.有感而发的一些话 在学习ng之前有听前辈说过,angular上手比较难,初学者可能不太适应其语法以及思想.随着对ng探索的一步步深入,也确实感觉到了这一点,尤其是框架内部的某些执行机制,其复杂程度 ...
- angularJS中自定义指令
学习了angularJS一周,但是大部分时间被自定义指令占用了.博主表示自学互联网好心塞的,发现问题的视觉很狭窄,这比解决问题要更难.这篇文章首先介绍了自定义,然后介绍了在使用自定义指令遇到的问题. ...
- 走进AngularJs(四)自定义指令----(中)
上一篇简单介绍了自定义一个指令的几个简单参数,restrict.template.templateUrl.replace.transclude,这几个理解起来相对容易很多,因为它们只涉及到了表现,而没 ...
- angularJS 使用自定义指令输出模板
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script sr ...
- angularjs Directive自定义指令详解
作用:需要用Directive有下面的情景: 1.使你的Html更具语义化,不需要深入研究代码和逻辑即可知道页面的大致逻辑. 2. 抽象一个自定义组件,在其他地方进行重用. 3.使用公共代码,减少重复 ...
- 带你走近AngularJS 之创建自定义指令
带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...
- Angularjs进阶笔记(2)-自定义指令中的数据绑定
有关自定义指令的scope参数,网上很多文章都在讲这3种绑定方式实现的效果是什么,但几乎没有人讲到底怎么使用,本篇希望聊聊到底怎么用这个话题. 一. 自定义指令 自定义指令,是Angularjs用来实 ...
随机推荐
- CMSEASY /lib/tool/front_class.php、/lib/default/user_act.php arbitrary user password reset vulnerability
catalog . 漏洞描述 . 漏洞触发条件 . 漏洞影响范围 . 漏洞代码分析 . 防御方法 . 攻防思考 1. 漏洞描述 攻击者通过构造特殊的HTTP包,可以直接重置任意用户(包括管理员)的密码 ...
- PHP FastCGI RCE Vul
catalog . Introduction . nginx文件类型错误解析漏洞 . 针对直接公网开放的Fast-CGI攻击 . 通过FCGI API动态修改php.ini中的配置实现RCE 1. I ...
- C++ essentials 之 union
Extraction from The C++ Programming Language 4th. edition, Bjarne Stroustrup [8.1] A struct is a seq ...
- selenium.Phantomjs设置浏览器请求头
from selenium import webdriver from selenium.webdriver.common.desired_capabilities import DesiredCap ...
- Visual Studio原生开发的20条调试技巧(下)
我的上篇文章<Vistual Studio原生开发的10个调试技巧>引发了很多人的兴趣,所以我决定跟大家分享更多的调试技巧.接下来你又能看到一些对于原生应用程序的很有帮助的调试技巧(接着上 ...
- SSH 学习总结-01 SSH整合环境
一 Struts2+Spring3+Hibernate4+Maven 整合环境 1 开发工具 1)JDK下载地址:http://www.oracle.com/technetwork/java/java ...
- Java 毫秒转换为日期类型、日期转换为毫秒
/毫秒转换为日期 public static void main(String[] args) { DateFormat formatter = new SimpleDateFormat(" ...
- php5.1以上版本时间戳_时间戳与日期格式转换_相差8小时 的解决方案
php5.1以上时间戳会与实际时间相差8小时,解决办法如下 .最简单的方法就是不要用php5.1以上的版本--显然这是不可取的方法!!! .修改php.ini.打开php.ini查找date.time ...
- host,nslookup,dig 命令安装
host,nslookup,dig依赖bind包,所以先看一下系统有没有bind包 命令如下:rpm -qa |grep bind 如果没有或者版本太低请升级安装 命令是:yum install bi ...
- Flask-WTF form doesn't have attribute 'validate_on_submit'问题
今天在学习WTF表单的时候遇到了这个问题,在stackoverflow上搜索查到了解决方案 from flask.ext.wtf import Form from wtforms import Tex ...