angular学习笔记(三十)-指令(2)-restrice,replace,template

本篇主要讲解指令中的 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
    }
});