下面所有例子都使用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. IE6与 javascript:void(0)

    遇到过几次这种问题,现在总结一下. 代码: <a onclick="window.location.href='http://www.google.com'" href=&q ...

  2. [zz] 混合高斯模型 Gaussian Mixture Model

    聚类(1)——混合高斯模型 Gaussian Mixture Model http://blog.csdn.net/jwh_bupt/article/details/7663885 聚类系列: 聚类( ...

  3. jQuery入门级part.2

    一,事件编程 基本事件: blur(fn)     当失去焦点时 change(fn)  当内容发生改变时 click(fn)    当鼠标单击时 dblclick(fn)  当鼠标双击时 focus ...

  4. Hadoop数据读写原理

    数据流 MapReduce作业(job)是客户端执行的单位:它包括输入数据.MapReduce程序和配置信息.Hadoop把输入数据划分成等长的小数据发送到MapReduce,称之为输入分片.Hado ...

  5. [Tex学习笔记]发一篇文章的经历

    打算在 INTERNATIONAL JOURNAL OFCONTEMPORARY MATHEMATICAL SCIENCES 发一篇文章, 所以就直接在 作者指引中下载 tex 模版, 写好后发邮件到 ...

  6. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  7. IOS启动页设置适应ios8/9

    直接上截图 1. 添加对应尺寸的图 2.设置三项 3.去掉默认设置 4.特别的xcode 7 需 通过在p.list配置文件中增加节点: Launch image 类型为String 设置值为Defa ...

  8. Android 日常开发总结的技术经验 60 条

    1. 全部Activity可继承自BaseActivity,便于统一风格与处理公共事件,构建对话框统一构建器的建立,万一需要整体变动,一处修改到处有效. 2. 数据库表段字段常量和SQL逻辑分离,更清 ...

  9. The listener supports no services解决一例

    The listener supports no services解决一例   Listener动态监听静态监听注册实例 今天做Advacned Replication实验的时候碰到一个问题,启动目标 ...

  10. Window中常见的dos命令

    1.如何实行操作dos命令:如果是Windows电脑,从开始--->所有程序---->附件--->命令提示 这样就可以开始命令提示符了 2关于一些dos命令: 2.1 盘符切换:盘符 ...