下面所有例子都使用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. 一个很奇怪的重复链接lib的问题

    早上在调一个程序的时候感觉非常奇怪,就是数据在初始化的时候会失败,后来发现是获取一个数据的时候出错了 假设我们又一个config.lib,sql.dll和main.exe 因为数据库在打开数据库的时候 ...

  2. python学习-day12：列表、元祖、字典介绍和内置

    list:列表 >>>----可以被修改.修改成元素,元素可以使单独的数字,也可以是:新的list. 通过:链表..每个元素存储的时候,同时会指向下一个元素. 二.list编辑修改方 ...

  3. MSSQL 获取汉字全拼 和 汉字首字母

    --获取全拼 DECLARE @str VARCHAR(max) SET @str= [dbo].[fn_Getquanpin]('中山') PRINT(@str) )) ) as begin ),) ...

  4. Java事务处理全解析（六）—— 使用动态代理（Dynamic Proxy）完成事务

    在本系列的上一篇文章中,我们讲到了使用Template模式进行事务管理,这固然是一种很好的方法,但是不那么完美的地方在于我们依然需要在service层中编写和事务处理相关的代码,即我们需要在servi ...

  5. OAF_文件系列3_实现OAF多行表中附件功能AttachmentImage（案例）

    20150727 Created By BaoXinjian

  6. view

    把view添加到某个视图的虾面 [self.superview insertSubview:smallCircle belowSubview:self]; // 返回两个数的根 return sqrt ...

  7. 一个简单的CORBA例子

    因为对CORBA分析的需要,这里写一个简单的CORBA例子.从JDK1.2开始,JDK中集成了ORB的实现,本例子使用了JDK1.7,对于JDK1.2+应该都没有问题.这个例子实现一个简单的加减乘除的 ...

  8. JSON库之性能比较：JSON.simple VS GSON VS Jackson VS JSONP

    从http://www.open-open.com/lib/view/open1434377191317.html 转载 Java中哪个JSON库的解析速度是最快的? JSON已经成为当前服务器与WE ...

  9. 安装android studio

    sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.0 lib32stdc++6 sudo apt-get install g++-multil ...

  10. android 图片进度条

    png图片 代码 ImageView loading=getActivity().findViewById(R.id.pro_loading); LinearInterpolator lin = ne ...