内嵌模版 template 原创

tempalte表示，将替换指令里面的内容，生成一个新的模板。例如：

 1 <body>
 2 <student></student><br/>
 3 <span student></span><br/>
 4 <span class="student"></span><br/>
 5 <!-- directive:student -->
 6 </body>
 7 <script src="../lib/angular/angular.js"></script>
 8 <script>
 9     angular.module('zfpxMod',[]);
10     angular.module('zfpxMod').directive('student',function(){
11         return {
12             // A Attribute 属性  E element 元素 M Commnent注释  C class 类名
13             restrict:'AEMC',//限定指令出现的位置AEMC
14             replace:true,// 会把指令本身替换掉
15             template:'<div>name:zf</div>'
16         }
17     });
18 </script>

结果就是：

<div>name:zf</div><br>
<div student="">name:zf</div><br>
<div class="student">name:zf</div><br>
<div student="">name:zf</div>

说明template替换了原来页面的内容，至于哪些元素容许替换，接下来我们就看

restrict，

restrict 的取值可以有三种：

  • A 用于元素的 Attribute，这是默认值
  • E 用于元素的名称
  • C 用于 CSS 中的 class

至于页面容不容许被替换就要看

replace是为ture还是false

 

posted @ 2017-04-24 09:20  Miss.xu  阅读(241)  评论(0)  编辑  收藏  举报