下面所有例子都使用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的更多相关文章

  1. AngularJs自定义指令详解（6） - controller、require

    在前面文章中提到一旦声明了require,则链接函数具有第四个参数:controller. 可见require和controller是配合使用的. 在自定义指令中使用controller,目的往往是要 ...

  2. AngularJs自定义指令详解（2） - template

    一些用于定义行为的指令,可能不需要使用template参数. 当指定template参数时,其值可以是一个字符串,表示一段HTML文本,也可以是一个函数,这函数接受两个参数:tElement和tAtt ...

  3. AngularJs自定义指令详解（5） - link

    在指令中操作DOM,我们需要link参数,这参数要求声明一个函数,称之为链接函数. 写法: link: function(scope, element, attrs) { // 在这里操作DOM} 如 ...

  4. AngularJs自定义指令详解（9） - terminal

    例子: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

  5. AngularJs自定义指令详解（8） - priority

    priority 默认值为0. 当一个元素上声明两个指令,而且它们的priority一样,谁先被调用?这个需要分情况讲.下面先给个例子: <!DOCTYPE html> <html& ...

  6. AngularJs自定义指令详解（7） - multiElement

    multiElement不太常用,从下面这个例子可以大致看出它的作用: <!DOCTYPE html> <html> <head lang="en"& ...

  7. AngularJs自定义指令详解（4） - transclude

    transclude默认值为false,如果设置 transclude为true,那么相应地,必须在模板代码中加入ng-transclude指令. 先看个例子: <!DOCTYPE html&g ...

  8. AngularJs自定义指令详解（3） - scope

    我们之所以要定义指令,目的是重用指令.假设有这么一个应用场景:在同一个html里使用了两次my-directive,第一个my-directive要展示的是Hello World,第二个my-dire ...

  9. AngularJs自定义指令详解（10） - 执行次序

    代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8 ...

随机推荐

  1. fiddler抓取手机数据包

    百度经验:http://jingyan.baidu.com/article/d8072ac4605905ec95cefda0.html

  2. Correlation Filter in Visual Tracking系列二：Fast Visual Tracking via Dense Spatio-Temporal Context Learning 论文笔记

    原文再续,书接一上回.话说上一次我们讲到了Correlation Filter类 tracker的老祖宗MOSSE,那么接下来就让我们看看如何对其进一步地优化改良.这次要谈的论文是我们国内Zhang ...

  3. Android学习笔记（五）

    Intent不仅用来启动一个活动,Intent还可以在启动活动的时候传递参数. 1.向下一个活动传递数据 启动活动的时候传递数据,Intent提供了一系列putExtra()方法的重载,可以把要传递的 ...

  4. Linux命令（21）查看文件的行数

    在 linux 系统中没有在 windows 系统中那么方便的点点鼠标就可以操作文件了,对文件的各种操作都必须使用各种命令来完成.比如有时候我们需要在不查看文件内容的情况下需要知道该文件有多少行.这个 ...

  5. SQL SERVER安装序列号

    MICROSOFT SQL SERVER 2012 DEVELOPER 版 序列号:YQWTX-G8T4R-QW4XX-BVH62-GP68Y MICROSOFT SQL SERVER 2012 EN ...

  6. JavaScript笔记:数据类型

    javascript中有5种基本数据类型:Undefined,Null,Boolean,Number和String,还有一种复杂的数据类型--Object.javascript不支持任何创建自定义类型 ...

  7. JavaScript基础篇

    写的不错,转 http://www.cnblogs.com/suoning/p/5656403.html

  8. dedecms代码研究三

    上次,我们从dedecms的index.PHP文件中了解到了很多信息,也提出了一些问题: 1)加载了/include/common.inc.php,里面做了哪些工作? 2)/include/arc.p ...

  9. HTML4.01和XHTML1.0和XHTML1.1的一些区别

    接触web前端以来,一直使用的都是html5,因此一直没搞明白HTML4.01和XHTML1.0和XHTML1.1之间的区别,今天在看<精通CSS>一书,有简单介绍这几个,在这儿记录下. ...

  10. yum命令指南

    yum check-update  检查可更新的所有软件包 yum update  下载更新系统已安装的所有软件包yum upgrade  大规模的版本升级,与yum update不同的是,连旧的淘汰 ...