下面所有例子都使用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. [HTML5]label标签使用以及建议

    for 属性规定 label 与哪个表单元素绑定. 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 <label&g ...

  2. [家里蹲大学数学杂志]第053期Legendre变换

    $\bf 题目$. 设 $\calX$ 是一个 $B$ 空间, $f:\calX\to \overline{\bbR}\sex{\equiv \bbR\cap\sed{\infty}}$ 是连续的凸泛 ...

  3. 在linux下python爬虫进程发生异常时自动重启直至正常结束的方法

    之前在做爬虫的时候遇到一种情况,当网络情况不太好的时候,爬虫爬到的链接在urlopen时会因为无法正常连接而报URLError或者timeout的错误导致陈序报错而终止:但是这些错误在重新运行陈序后能 ...

  4. SQL语句 DML,DDL,DCL

    数据控制语言(DCL)是用来设置或者更改数据库用户或角色权限的语句,这些语句包括GRANT.DENY.REVOKE等语句,在默认状态下,只有 sysadmin.dbcreator.db_owner或d ...

  5. 实用的VS工具

    工具 1.Visual Studio Visual Studio Productivity Power tool:Visual Studio专业版(及以上)的扩展,具有丰富的功能,如快速查找,导航解决 ...

  6. 栅格数据处理 RasterDataset RasterLayer Raster RasterBandCollection

    1 IRasterLayer myrasterlayer = MapControl.Map.Layer[index] as IRasterLayer;2 IRaster myRaster = myra ...

  7. 在IIS8添加WCF服务支持

    最近在做Silverlight,Windows Phone应用移植到Windows 8平台,在IIS8中测试一些传统WCF服务应用,发现IIS8不支持WCF服务svc请求,后来发现IIS8缺少对WCF ...

  8. EXT学习之——获取下拉框combobox的值与显示名

    //申请科室 var comboboxdept = new Ext.form.ComboBox({ xtype: "combobox", name: "Gender&qu ...

  9. Oracle 表分区

    从以下几个方面来整理关于分区表的概念及操作: 表空间及分区表的概念 表分区的具体作用 表分区的优缺点 表分区的几种类型及操作方法 对表分区的维护性操作 1.表空间及分区表的概念 表空间: 是一个或多个 ...

  10. php中好用的时间函数

    //查询数据30天的数据$y=date("Y",time());$m=date("m",time());$d=date("d",time() ...