1. 程式人生 > >Angular 自定義指令

Angular 自定義指令

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--自定義指令 需要服務端請求-->
		<!--<div tag></div>--> 
		<!--<tag/>-->
		<!--<div class="tag"></div> -->
		<!--directive:tag -->
	
		<script src="../libs/angular.min.js"></script>
		<script>
			// 定義一個模組 App就是新建立的模組,這個模組又是一個物件
			// 在此物件下又有N多方法,可以實現具體業務邏輯
			var App = angular.module('dome',[]);
			
			// 自定義指令 :通過模組例項物件的directive方法
			App.directive('tag', function () {
				// 返回一個物件,這個物件就是自定義指令相關的內容
				return {
					// 自定義指令的型別:E element,A attribute,C class,M mark replace 必須為true
					restrict: 'ECMA',
					
					//指令模板	
					template: '<h1>hello AngudlarJS</h1>',
					
					//指令外部模板
					templateUrl: './list.html',
					
					//是否替換原有標籤
					replace: true
				}
			});
			
		</script>
	</body>
</html>