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