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 ...
随机推荐
- yii2 使用twig 模板引擎
yii2 默认使用PHP 和html 混合的方式来写视图层,但我个人还是喜欢纯模板语言的方式.而且已经非常习惯使用twig的语法,最近想使用yii2进行开发,所以还是选择使用twig视图引擎. git ...
- Linux系统性能和使用活动监控工具 sysstat
Sysstat是一个非常方便的工具,它带有众多的系统资源监控工具,用于监控系统的性能和使用情况.我们在日常使用的工具中有相当一部分是来自sysstat工具包的.同时,它还提供了一种使用cron表达式来 ...
- swoole和erlang通信测试
直接用docker跑环境 docker pull xlight/docker-php7-swoole docker run -it -v ~/Projects/php/swoole:/workdir ...
- 黄聪：PHP页面跳转如何实现延时跳转
php在用header重定向的时候,可以设置下延时跳转,代码如下: header("Refresh:5;url=index.php");
- RFC3986编码 C 语言实现(支持大部分中文)
前些时间做 xauth 认证程序的编写,网上找到RFC3986编码不支持中文的编码,所以便查找了一些资料.自己写了一个,代码如下. #include <stdlib.h> #include ...
- python（23）re函数：compile、match、search、findall
正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. re 模块使 Python ...
- Linq系列
LINQ 图解 Linq中的Select——投影 Linq学习资源 Expert C# 5.0中的Linq部分
- phonegap文件，目录操作以及网络上传，下载文件（含demo）
正在做一个跨平台的应用,需要使用phonegap进行文件的一些基本操作. 需求如下:可以选择本地图片,或者从相机选择图片,并进行显示在本地,然后上传到服务器,以及可以从服务器下载图片显示出来,如果本地 ...
- oracle11g rac asm存储数据迁移
OS:rh6.4 ORACLE 11g RAC ASM OCR和VOTING DISK在crs磁盘组,控制文件.数据文件.参数文件在DATA组. 1.备份数据库 RUN {ALLOCATE CHANN ...
- jquery.easypiechart.js简介
此插件主要是用来统计新的访问.跳出率.服务器负载.使用的RAM等,功能很强大,带有HTML5的动画效果,效果非常炫,看效果吧easyPieChart一款新型的EASY饼图数据统计Jquery插件截图: ...