首页 > 代码库 > angular学习笔记(三十)-指令(2)

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

2024-07-18 19:24:29   223人阅读

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

页面结果:

说明:

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和属性还是会被保留

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


联系
我们