angular学习笔记(三十)-指令(2)

时间：2014-08-21 18:50:24 阅读：355 评论：0 收藏：0 [点我收藏+]

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

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

1. 元素: E

2. 属性: A

3. 样式类: C

4. 注释: M

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

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

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

2.false: 不替换整个使用指令的元素,而是把内容追加到指令元素的内部.

不指定的话默认为false

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

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

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

下面来看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
    }
});

页面结果:

bubuko.com,布布扣