下面所有例子都使用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. Access使用参数化UPDATE数据时，数据无法更新的问题

    今天update access数据库时,使用了参数化的方式,结果不报错,但是数据也没有更新.经过google发现access使用参数化时,参数位置必须和赋值顺序相同才行,否则更新时就会出现数据无法更新 ...

  2. DDL DML DCL语句

    总体解释:DML(data manipulation language):自动提交的数据库操作语言       它们是SELECT.UPDATE.INSERT.DELETE,就象它的名字一样 DDL( ...

  3. 用file上传文件时，浏览器返回值总是自动添加<pre>的解决办法

    在返回的JSon字符串里面总是莫名其妙的添加了<pre>标签,例如返回内容为"ok",在浏览器里面就变成了"<pre style="word- ...

  4. Struts2：标签库

    使用struts标签库的jsp需要引入标签库<%@taglib prefix="s" uri="/struts-tags"%>url来自哪里? st ...

  5. oracle 认证方式

    Oracle登录的时候有两种认证方式,一种是“操作系统认证”,一种是“口令文件认证”.1.当采取操作系统认证的时候,在本地用任何用户都可以以sysdba登陆:(默认方式)2.当采取口令文件认证的时候, ...

  6. Maven实战（六）依赖

    我们项目中用到的jar包可以通过依赖的方式引入,构建项目的时候从Maven仓库下载即可. 1. 依赖配置    依赖可以声明如下: <project> ... <dependenci ...

  7. 转：RTC搭建android下三层应用程序访问服务器MsSql-服务器端

    原文:http://www.cnblogs.com/delphi007/p/3346061.html 前几天通过Ro搭建webservice,然后在android下调用,虽然已近成功,但是返回的数据库 ...

  8. delphi ftBlob二进制字段读取存储

    aStream:TMemoryStream; 保存到字段 qrypub.ParamByName('Data').LoadFromStream(aStream, ftBlob); 从字段读取到mem里 ...

  9. 26、首先通过javascript包的异步加载来学习echarts包的结构

    1.在这里先写一写前言,今天在公司搞定了一个对于滚动条进行定位的case,明天开始做TestManagement. 首先大家先来一起看一看流行的javascript文件的加载方式,这里采用别人博客上的 ...

  10. Support Vector Machine (1) : 简单SVM原理

    目录 Support Vector Machine (1) : 简单SVM原理 Support Vector Machine (2) : Sequential Minimal Optimization ...