angularjs指令:transclude

angular.module('myApp',[])
.directive('hello',function(){
	return {
		restrict : "AE",
		transclude : true,
		template:"<div>Hello everyone!<div ng-transclude></div></div>"
	}
})

<!DOCTYPE html>
<html ng-app="myApp">
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/angular.min.js"></script>
		<script src="js/$transclude.js"></script>
	</head>
	<body>
		<hello>
			<div>這裏是指令內部的內容。</div>
		</hello>
			
		
	</body>
</html>

結果:

Hello everyone!

這裏是指令內部的內容。

可以看出hello指令的內部內蓉<div>這裏是指令內部的內容。</div>被插到到了
<div ng-transclude></div>之間了
<hello>
	<div>這裏是指令內部的內容。</div>
</hello>
這樣就能實現指令內部使用指令了。
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章