angularjs学习之七（angularjs中指令的四种基本形式）

最新推荐文章于 2019-07-06 17:36:15 发布

栁罗风尘

最新推荐文章于 2019-07-06 17:36:15 发布

阅读量1.2k

点赞数 1

分类专栏： angular js 文章标签： angularjs

本文链接：https://blog.csdn.net/wujiangwei567/article/details/46798935

版权

angular js 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

指令的四种基本形式中，

注意注释型指令 M 的使用方法是  注意左右俩测必须有空格才会正常识别

所有指令是可以相互组合的，不写restrict ，将会默认为A属性指令

要支持IE8 浏览器一般最好将指令设置为属性

<!doctype html>
<html ng-app="myapp">
	<head>
		<meta charset="utf-8"/>
	</head>
	<body>

        <elementtag>E</elementtag>
		<div attr>A</div>
		<div class="classnamw">C</div>
		<!-- 注意注释变量两侧必须加上空格 否则不会正确执行这个指令 -->
		<!-- directive:commit -->
		<div></div>

	<script src="./js/angular.min.js"></script>
	<script>
	   var app = angular.module('myapp',[]);
	   
	   app.directive('elementtag',function(){
	       return {
			   restrict:"E", //元素指令
			   link:function(scope,element,attrs){
                   console.log("this is a element");
			   }
		   };
	   })
	   .directive('attr',function(){
	       return {
			   restrict:"A", //属性指令
			   link:function(scope,element,attrs){
                   console.log("this is a attribute");
			   }
		   };
	   })
	   .directive('classnamw',function(){
	       return {
			   restrict:"C", //class 指令
			   link:function(scope,element,attrs){
                   console.log("this is a class");
			   }
		   };
	   })
	   .directive('commit',function(){
	       return {
			   restrict:"M", //注释指令
			   link:function(scope,element,attrs){
                   console.log("this is a commit");
			   }
		   };
	   });

	</script>
</html>