本篇主要讲解指令中的 restrict属性, replace属性, template属性 这三个属性

一. restrict: 字符串.定义指令在视图中的使用方式,一共有四种使用方式:

1. 元素: E

2. 属性: A

3. 样式类: C

4. 注释: M

restrict的值可以是上面四个字母的任意一个或多个的组合. 不指定的话默认为A.

二. replace: 布尔值.是否将指令元素替换,可以有两个值:

1.true: 替换整个使用指令的元素

2.false: 不替换整个使用指令的元素,而是把内容追加到指令元素的内部.注意,即使指令元素内部原来是有内容的,那么里面的内容还是会被清空.被模板内容所替代.而不是插入到原内容的后面.如果需要使用指令元素内部的内容,需要定义transclude属性,详细参考:angular学习笔记(三十)-指令(4)-transclude

不指定的话默认为false.

三. template: 字符串.用于指定指令元素需要使用的内联模板.简单的说,就是一段字符串格式的html,这段html会被插入到指令元素中(或者替换指令元素)

很少用,一般内联模板都比较复杂,不能通过字符串来拼凑出很长一段html,需要使用templateUrl属性.template用法比较复杂,在下一篇中讲解.

如果既不指定template也不指定templateUrl,那么就说明,这个指令的作用不是去修改或者替换指令元素的内容.比如 angular学习笔记(十九)-指令修改dom 这个例子

注意,当replace属性为true的时候,template的最外层必须用一整个标签包裹起来(后面的templateUrl亦同),比如:

这样一个模板,在replace属性为true的时候是会报错的.

<h3></h3>

<h2></h2>

<span></span>

必须这样才对:

</div>

    <h3></h3>

    <h2></h2>

    <span></span>

</div>

下面来看demo:

html:

<!DOCTYPE html>

<html ng-app="dirAppModule">

<head>

  <title>20.1指令</title>

  <meta charset="utf-8">

  <script src="../angular.js"></script>

  <script src="script.js"></script>

  <style type="text/css">

    h3 {

      color:#CB2027

    }

  </style>

</head>

<body>

  <cd-hello></cd-hello>

  <div cd-hello></div>

  <div class="cd-hello"></div>

</body>

</html>

js:

/*20.1 指令 */

var dirAppModule = angular.module('dirAppModule',[]);

dirAppModule.directive('cdHello',function(){

    return {

        restrict:'EAC',

        template:'<h3>hi,code_bunny</h3>',

        replace:false

    }

});

页面结果:

说明:

1.这个页面里一共有三个元素.一个是标签就是cd-hello,一个是div有一个cd-hello属性,一个是div的类名为cd-hello.

要让这三个元素都能使用到我定义的cdHello这个指令,就需要设置restrict的值为"EAC",

其中,E支持了<cd-hello></cd-hello>,A支持了<div cd-hello></div>,C支持了<div class="cd-hello"></div>

如果我删掉EAC其中的一项,那么对应的元素也就不会应用cd-hello指令...

2.可以看到,指令用template里面的内容追加到了应用指令的元素中

3.如果把replace属性的值改为true:

可以看到应用指令的元素被整个替换掉了.但是注意,class和属性还是会被保留

4.指令的命名需要使用驼峰命名,比如cd-hello指令,应该命名成cdHello,如果命名成cd-hello是错误的.

5.当replace属性设置为true时,模板内容必须是被一个大的标签所包含,外层不能是若干个兄弟的标签.

比如这里,当replace属性为true的时候,如果template内容是:'<h3>hi,code_bunny</h3><h4>...</h4>',这样就不对.如果是这种情况,template的内容必须是

'<div><h3>hi,code_bunny</h3><h4>...</h4></div>'这样子.下一篇中讲到的templateUrl亦然.

完整代码地址: https://github.com/OOP-Code-Bunny/angular/tree/master/OREILLY  20.1.指令.html

angular学习笔记(三十)-指令(2)-restrice,replace,template的更多相关文章

  1. angular学习笔记(三十)-指令(10)-require和controller

    本篇介绍指令的最后两个属性,require和controller 当一个指令需要和父元素指令进行通信的时候,它们就会用到这两个属性,什么意思还是要看栗子: html: <outer‐direct ...

  2. angular学习笔记(三十)-指令(7)-compile和link(2)

    继续上一篇:angular学习笔记(三十)-指令(7)-compile和link(1) 上一篇讲了compile函数的基本概念,接下来详细讲解compile和link的执行顺序. 看一段三个指令嵌套的 ...

  3. angular学习笔记(三十)-指令(7)-compile和link(1)

    这篇主要讲解指令中的compile,以及它和link的微妙的关系. link函数在之前已经讲过了,而compile函数,它和link函数是不能共存的,如果定义了compile属性又定义link属性,那 ...

  4. angular学习笔记(三十)-指令(6)-transclude()方法(又称linker()方法)-模拟ng-repeat指令

    在angular学习笔记(三十)-指令(4)-transclude文章的末尾提到了,如果在指令中需要反复使用被嵌套的那一坨,需要使用transclude()方法. 在angular学习笔记(三十)-指 ...

  5. angular学习笔记(三十)-指令(5)-link

    这篇主要介绍angular指令中的link属性: link:function(scope,iEle,iAttrs,ctrl,linker){ .... } link属性值为一个函数,这个函数有五个参数 ...

  6. angular学习笔记(三十)-指令(1)-概述

    之前在 angular学习笔记(十九)-指令修改dom 里面已经简单的提到了angular中的指令,现在来详细的介绍 '指令' 一.指令的创建: dirAppModule.directive('dir ...

  7. angular学习笔记(三十)-指令(8)-scope

    本篇讲解指令的scope属性: scope属性值可以有三种: 一.scope:false 默认值,这种情况下,指令的作用域就是指令元素当前所在的作用域. 二.scope:true 创建一个继承了父作用 ...

  8. angular学习笔记(三十)-指令(7)-compile和link(3)

    本篇接着上一篇来讲解当指令中带有template(templateUrl)时,compile和link的执行顺序: 把上一个例子的代码再进行一些修改: 1.将level-two指令改成具有templa ...

  9. angular学习笔记(三十)-指令(4)-transclude

    本篇主要介绍指令的transclude属性: transclude的值有三个: 1.transclude:false(默认值) 不启用transclude功能. 2.transclude:true 启 ...

随机推荐

  1. Windows操作系统安全加固

    本文档旨在指导系统管理人员或安全检查人员进行Windows操作系统的安全合规性检查和配置. 1. 账户管理和认证授权 1.1 账户 默认账户安全 禁用Guest账户. 禁用或删除其他无用账户(建议先禁 ...

  2. android发送与接收超长短信

    android发送与接收超长短信 android接收发送短信,支持的最大字符数是70个,实际是67个字符,如果发送的短信超过了该数目,那就需要用到sendMultipartTextMessage()方 ...

  3. [转载]Ubuntu安装配置 git 服务器和客户端

    原文地址:Ubuntu安装配置 git 服务器和客户端作者:ding404 1.配置前准备 服务器:安装ssh server另外还装了gitosis做git的权限管理 sudo apt-get ins ...

  4. Linux修改终端提示符

    打开~/.bashrc可以看到命令提示的内容为:\u@\h\w\$ \u表示用户名,\h表示主机名,\w表示当前目录,\$表示命令提示符(普通用户$,超级用户#) 这个命令提示符有点长,很碍事,\u@ ...

  5. 推荐系统 BPR 算法求解过程

    数据假设: 每个用户之间的偏好行为相互独立 同一用户对不同物品的偏序相互独立 则优化问题为极大化如下目标: [Reference] 1.论文翻译:BPR:面向隐偏好数据的贝叶斯个性化排序学习模型 2. ...

  6. string与char*的转换方法

    c_str函数的返回值是const char*的,不能直接赋值给char*,所以就需要我们进行相应的操作转化,下面就是这一转化过程. c++语言提供了两种字符串实现,其中较原始的一种只是字符串的c语言 ...

  7. 使用Beetle简单构建高性能Socket tcp应用

    beetle是基于c#编写的高性能Socket tcp组件,它基于SocketAsyncEventArgs的实现并提供了发送队列和接收队列的支持,可以根据情况灵活地设置1-N个发送队列和接收队列.除了 ...

  8. android异步处理机制

    昨天面试被提问android的异步处理机制有哪些,他说处理new thread还有哪种方式,我说implement runnable,他说不是,比如intentservice. 我说那还有asyncT ...

  9. Oracle->mysql碰到的问题

    1.大小写敏感的区别(如果服务器OS是linux).    在oracle中一般情况下不区分大小写.有时候我们在使用oracle不注意大小写的问题,表名和字段名不加双引号是不区分大小写的,像这样:in ...

  10. MVC+Spring.NET+NHibernate .NET SSH框架整合 C# 委托异步 和 async /await 两种实现的异步 如何消除点击按钮时周围出现的白线？ Linq中 AsQueryable(), AsEnumerable()和ToList()的区别和用法

    MVC+Spring.NET+NHibernate .NET SSH框架整合   在JAVA中,SSH框架可谓是无人不晓,就和.NET中的MVC框架一样普及.作为一个初学者,可以感受到.NET出了MV ...