AngularJS中指令的四种基本形式实例分析

本文实例讲述了AngularJS中指令的四种基本形式。分享给大家供大家参考,具体如下:

指令的四种基本形式中,

注意注释型指令 M 的使用方法是 <!--  directive:指令名称  --> 注意左右俩测必须有空格才会正常识别

所有指令是可以相互组合 的,不写restrict ,将会默认为A属性 指令要支持IE8 浏览器 一般最好将指令设置为属性

 1 <!doctype html>
 2 <html ng-app="myapp">
 3   <head>
 4     <meta charset="utf-8"/>
 5   </head>
 6   <body>
 7     <elementtag>E</elementtag>
 8     <div attr>A</div>
 9     <div class="classnamw">C</div>
10     <!-- 注意注释变量两侧必须加上空格 否则不会正确执行这个指令 -->
11     <!-- directive:commit -->
12     <div></div>
13   <script src="./js/angular.min.js"></script>
14   <script>
15     var app = angular.module('myapp',[]);
16     app.directive('elementtag',function(){
17       return {
18         restrict:"E", //元素指令
19         link:function(scope,element,attrs){
20           console.log("this is a element");
21         }
22       };
23     })
24     .directive('attr',function(){
25       return {
26         restrict:"A", //属性指令
27         link:function(scope,element,attrs){
28           console.log("this is a attribute");
29         }
30       };
31     })
32     .directive('classnamw',function(){
33       return {
34         restrict:"C", //class 指令
35         link:function(scope,element,attrs){
36           console.log("this is a class");
37         }
38       };
39     })
40     .directive('commit',function(){
41       return {
42         restrict:"M", //注释指令
43         link:function(scope,element,attrs){
44           console.log("this is a commit");
45         }
46       };
47     });
48   </script>
49 </html>

原始地址:http://www.jb51.net/article/97961.htm

posted @ 2016-12-21 10:01  Mundo Novo  阅读(245)  评论(0编辑  收藏  举报