没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
AngularJs directive详解及示例代码详解及示例代码
本文主要讲解AngularJs directive的知识,这里整理了相关资料及示例代码,有兴趣的小伙伴可以参考下
Directive是教HTML玩一些新把戏的途径。在DOM编译期间,directives匹配HTML并执行。这允许directive注册行为或者转换DOM结构。
Angular自带一组内置的directive,对于建立Web App有很大帮助。继续扩展的话,可以在HTML定义领域特定语言(domain specific
language ,DSL)。
一、在一、在HTML中引用中引用directives
Directive有驼峰式(camel cased)的风格的命名,如ngBind(放在属性里貌似用不了~)。但directive也可以支蛇底式的命名(snake
case),需要通过:(冒号)、-(减号)或_(下划线)连接。作为一个可选项,directive可以用“x-”或者“data-”作为前缀,以满足HTML验
证需要。这里列出directive的合法命名:
1. ng:bind
2. ng-bind
3. ng_bind
4. x-ng-bind
5. data-ng-bind
Directive可以放置于元素名、属性、class、注释中。下面是引用myDir这个directive的等价方式。(但很多directive都限制为“属性”的使
用方式)
<span my-dir="exp"></span>
<span class="my-dir: exp;"></span>
<my-dir></my-dir>
<!-- directive: my-dir exp -->
Directive可以通过多种方式引用,下面列出N种等价的方式:
<!DOCTYPE HTML>
<html lang="zh-cn" ng-app>
<head>
<meta charset="UTF-8">
<title>invoke-directive</title>
<style type="text/css">
.ng-cloak {
display: none;
}
</style>
</head>
<body>
<div ng-controller="MyCtrl">
Hello <input ng-model="name"/><hr/>
ngBind="name" 这个用不了~~ <span ngBind="name"></span><br/>
ng:bind="name"<span ng:bind="name"></span><br/>
ng_bind="name"<span ng_bind="name"></span><br/>
ng-bind="name"<span ng-bind="name"></span><br/>
data-ng-bind="name"<span data-ng-bind="name"></span><br/>
x-ng-bind="name"<span x-ng-bind="name"></span><br/>
</div>
<script src="../angular-1.0.1.js" type="text/javascript"></script>
<script type="text/javascript">
function MyCtrl($scope) {
$scope.name = "beauty~~";
}
</script>
</body>
</html>
二、二、String interpolation
在编译过程中,compiler通过$interpolate服务匹配文本与属性中的嵌入表达式(如{{something}})。这些表达式将会注册为watches,
并且作为digest cycle(之前不是digest-loop吗?!)的一部分,一同更新。下面是一个简单的interpolation:
<img src="img/{{username}}.jpg"/>Hello {{username}}!
三、三、Compilation process, and directive matching
HTML“编译”的三个步骤:
1. 首先,通过浏览器的标准API,将HTML转换为DOM对象。这是很重要的一步。因为模版必须是可解析(符合规范)的HTML。这里
可以跟大多数的模版系统做对比,它们一般是基于字符串的,而不是基于DOM元素的。
2. 对DOM的编译(compilation)是通过调用$comple()方法完成的。这个方法遍历DOM,对directive进行匹配。如果匹配成功,那么它
将与对应的DOM一起,加入到directive列表中。只要所有与指定DOM关联的directive被识别出来,他们将按照优先级排序,并按照这个顺序
执行他们的compile() 函数。directive的编译函数(compile function),拥有一个修改DOM结构的机会,并负责产生link() function的解析。
$compile()方法返回一个组合的linking function,是所有directive自身的compile function返回的linking function的集合。
资源评论
weixin_38567962
- 粉丝: 2
- 资源: 944
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功