angularJS学习之路（二十）---自定义指令---transclude的作用

最新推荐文章于 2020-05-24 19:24:07 发布

wust小吴

最新推荐文章于 2020-05-24 19:24:07 发布

阅读量648

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/u014737138/article/details/50009015

angularjs 专栏收录该内容

31 篇文章

订阅专栏

本文介绍了一个使用AngularJS创建自定义指令的例子。通过两个指令'clock'和'panel'展示了如何定义带有属性和模板的自定义元素。'clock'指令用于显示时间，而'panel'则作为容器展示标题和内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js代码：

var app = angular.module("myApp", []);
app.directive("clock", function() {
	return {
		restrict: 'E',
		scope: {
			timezone: "@"
		},
		template: "<div>12:00pm {{timezone}}</div>"
	}
});

app.directive("panel", function() {
	return {
		restrict: 'E',
		transclude: true,
		scope: {
			title: "@"
		},
		template: "<div style='border:3px solid #000000><div class='button'>{{title}}</div><div ng-transclude></div></div>"
	}
});

Html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
		<title></title>
	</head>
	<body>
		<div ng-app="myApp">
			<clock timezone="MST"></clock>
			<br /><br /><br />
			<panel title="I am a title" >
				<clock timezone="PST"></clock>
			</panel>
		</div>
		<script type="text/javascript" src="../js/angular.min.js" ></script>
		<script type="text/javascript" src="../js/components.js" ></script>
	</body>
</html>

效果：

12:00pm MST

<div button'="" class="ng-binding" style="box-sizing: border-box;">I am a title

12:00pm PST