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 ...
随机推荐
- 使用WebView加载assets下的html文件
有时候,我们需要将html文件以及所用到的图片都放在 assets/html/ 目录下.然后在页面上通过WebView来显示出来,比如给页面一个默认的显示,这样子看起来效果要好很多.代码如下: pri ...
- Linux下访问网站
1.将打包的文件解压到/usr/local/tomcat7/webapps/ROOT下 2.将8080端口开启 3.通过浏览器访问,结果返回来的状态时Aborted,出现 严重: The web ap ...
- apache 配置多个虚拟主机，不同的端口
1.在httpd.conf添加多个端口,如下 Listen 80Listen 8080 2.开启Include conf/extra/httpd-vhosts.conf 3.具体代码如下 <Vi ...
- try-catch（C# 参考）
https://msdn.microsoft.com/zh-cn/library/0yd65esw.aspx Try-catch 语句包含一个后接一个或多个 catch 子句的 try 块,这些子句指 ...
- JS Math对象中一些小技巧
JS中快速获取数组中最大/最小值 var a=[1,2,3,5]; alert(Math.max.apply(Math, a));//最大值 alert(Math.min.apply(Math, a) ...
- RPC远程过程调用协议
最近学习Hadoop.Hbase.Spark及Storm原理,经常会出现RPC这样的传输术语,为了更好地理解,将知识点详细的整理下吧~ RPC-----它是一种通过网络从远程计算机程序上请求服务,而不 ...
- Shell脚本中执行sql语句操作mysql
对于自动化运维,诸如备份恢复之类的,DBA经常需要将SQL语句封装到shell脚本.本文描述了在Linux环境下mysql数据库中,shell脚本下调用sql语句的几种方法,供大家参考.对于脚本输出的 ...
- KVO/KVC 实现机理分析
来源:http://blog.csdn.net/dqjyong/article/details/7672865 Objective-C里面的Key-Value Observing (KVO)机制,非常 ...
- emacs使用 simple-httpd和impatient-mode插件实现livereload
现在用emacs写前段,自然想实现那种,编辑器里编辑,然后浏览器端页面自己刷新 使用 simple-httpd 和impatient-mode 两个插件,可以实现, 按照文档安装好使用就可以,我没找到 ...
- Linux 11g rac PSU
PSU补丁:p22191577_112040_Linux-x86-64.zipOPATCH工具:p6880880_112000_LINUX.zip 解压OPATCH工具 覆盖到/u01/11.2.0/ ...