AngularJS中指令的四种基本形式实例分析
本文实例讲述了AngularJS中指令的四种基本形式。分享给大家供大家参考,具体如下:
指令的四种基本形式中,
注意注释型指令M的使用方法是<!-- directive:指令名称 -->注意左右俩测必须有空格才会正常识别
所有指令是可以相互组合的,不写restrict,将会默认为A属性指令要支持IE8浏览器一般最好将指令设置为属性
<!doctypehtml>
<htmlng-app="myapp">
<head>
<metacharset="utf-8"/>
</head>
<body>
<elementtag>E</elementtag>
<divattr>A</div>
<divclass="classnamw">C</div>
<!--注意注释变量两侧必须加上空格否则不会正确执行这个指令-->
<!--directive:commit-->
<div></div>
<scriptsrc="./js/angular.min.js"></script>
<script>
varapp=angular.module('myapp',[]);
app.directive('elementtag',function(){
return{
restrict:"E",//元素指令
link:function(scope,element,attrs){
console.log("thisisaelement");
}
};
})
.directive('attr',function(){
return{
restrict:"A",//属性指令
link:function(scope,element,attrs){
console.log("thisisaattribute");
}
};
})
.directive('classnamw',function(){
return{
restrict:"C",//class指令
link:function(scope,element,attrs){
console.log("thisisaclass");
}
};
})
.directive('commit',function(){
return{
restrict:"M",//注释指令
link:function(scope,element,attrs){
console.log("thisisacommit");
}
};
});
</script>
</html>
希望本文所述对大家AngularJS程序设计有所帮助。