Angular自定义指令入门

 

代码

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
	<meta charset="UTF-8">
	<title>Angular指令--Hello World</title>
</head>
<body>

	<!-- 基于属性的使用 -->
	<div my-direct></div>

	<!-- 基于元素的使用 -->
	<my-direct></my-direct>
	<!-- 基于类样式的使用 -->
	<div class="my-direct"></div>

	<!-- 基于注释的使用->几乎不用 -->
	<!--directive:myDirect-->



	<script type="text/javascript" src="js/lib/angular/angular.min.js"></script>
	<script type="text/javascript">
		var app = angular.module("app",[]);

		//定义指令的时候，不能用短横，必须是驼峰风格，使用的时候驼峰自动变短横。
		app.directive("myDirect",[function(){
			//返回一个指令定义对象
			//restrict用来设置四个类型的指令:AECM，其中AE是默认的，如果想用C的话

			return {
				restrict : "AECM",
				//template就是要显示的指令内容
				template : "<h1>Hello World</h1>"
			}
		}]);
	</script>
</body>
</html>

效果图

Angular自定义指令入门_angular

Angular自定义指令入门_angular_02
Angular自定义指令入门_angular_03