Angular自定義指令入門

時間 2020-02-09 標籤 angular 自定義指令入門

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>

效果圖

學習資源推薦：http://www.noobyard.com/article/p-wbhqriyp-gn.htmljavascript