AngularJs自定义指令详解（1） - restrict
下面所有例子都使用angular-1.3.16。下载地址：http://cdn.bootcss.com/angular.js/1.3.16/angular.min.js
既然AngularJs快要发布2.0，所以现在也没必要追求最新版本。而且，2.0变动实在太大，所以当前学习AngularJs不需要过度深入。
AngularJs自定义指令时，要求返回一个指令定义对象（Directive Definition Object），该对象可以声明若干属性和方法。下面例子的restrict、template就是其中之一。
restrict是一个可选的参数，若不声明，则取默认值EA。
可选值包括：E（元素）A（属性）C（类名）
混合使用：如:EA，表示既可以作为E也可以作用A。
例子：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="../lib/angular-1.3.16/angular.min.js"></script>
<script src=""></script>
<title></title>
<script language="JavaScript">
angular.module('app',[])
.directive('myDirective',function(){
return{
restrict:'EAC',
template:'Hello World!' };
});
</script>
</head>
<body ng-app="app">
<my-directive></my-directive>
<div my-directive></div>
<div class="my-directive"></div>
</body>
</html>
在Google Chrome查看：
点击右键-审查元素（或快捷键ctl+shift+i），可以看到：
注意‘Hello World！’字符串的插入位置。
AngularJs自定义指令详解（1） - restrict的更多相关文章
- AngularJs自定义指令详解（6） - controller、require
在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...
- AngularJs自定义指令详解（2） - template
一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...
- AngularJs自定义指令详解（5） - link
在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...
- AngularJs自定义指令详解（9） - terminal
例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
- AngularJs自定义指令详解（8） - priority
priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html& ...
- AngularJs自定义指令详解（7） - multiElement
multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...
- AngularJs自定义指令详解（4） - transclude
transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...
- AngularJs自定义指令详解（3） - scope
我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...
- AngularJs自定义指令详解（10） - 执行次序
代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...
随机推荐
- Delphi下16进制位图数据转位图
如果我们在Form中拖入一个Image控件,并设置好picture后,Alt+F12就可以看到Form的源代码中已经将图片转成了16进制字符串,如下: ? 1 2 3 4 5 6 7 8 9 10 1 ...
- <mvc:annotation-driven/>与<mvc:default-servlet-handler/>之间的一个问题
<mvc:annotation-driven/>与<mvc:default-servlet-handler/>之间的一个问题 在做项目的时候,我希望静态资源由WEB服务器默认的 ...
- Markdown中插入数学公式
如果想复杂使用的话,百度Latex公式,找些看一下. 使用MathJax引擎 大家都看过Stackoverflow上的公式吧,漂亮,其生成的不是图片.这就要用到MathJax引擎,在Markdown中 ...
- 51nod 最近刷题 简要题解
51nod 1564 由于数据是随机的,可以证明,对于每一个数,向左或右找比它小的数,长度是logn级别的 考虑枚举最大值 注意,对于每一个最大值,如果直接用2个循环枚举左右端点的话,理论是lognl ...
- IOS启动页设置适应ios8/9
直接上截图 1. 添加对应尺寸的图 2.设置三项 3.去掉默认设置 4.特别的xcode 7 需 通过在p.list配置文件中增加节点: Launch image 类型为String 设置值为Defa ...
- JDBC进行批处理
转自 http://mousepc.iteye.com/blog/1131462 业务场景:当需要向数据库发送一批SQL语句执行时,应避免向数据库一条条的发送执行,而应采用JDBC的批处理机制,以提升 ...
- Chap6: question 46 - 48
46. 求 1+2+ … +n. 要求:不用乘除法.for.while.if.else.switch.case 以及条件判断语句(A?B:C). a. 利用构造函数求解 #include <io ...
- Tomcat 常用配置
1.Tomcat 管理员设置 想要进入Tomcat管理界面: 打开Tomcat 目录 :进入 Conf目录,找到tomcat-users.xml文件,打开 修改 tomcat-users 节, 2.T ...
- Spring项目解决Post乱码
Java EE解决Post乱码:在web.xml中加入: <filter> <filter-name>encodingFilter</filter-name> &l ...
- DCOM中的APPID的用处，以及RemoteServerName的传递问题
DCOM中的APPID的用处,以及RemoteServerName的传递问题