angularjs中的transclude参数的理解

发布时间：2020-12-17 10:10:59 所属栏目：安全来源：网络整理

导读：首先我们来和replace进行一个对比： !doctype htmlhtml ng-app="MyModule"headmeta charset="utf-8"/headbodyhellodiv这里是指令内部的内容。/div/hello/bodyscript src="framework/angular-1.3.0.14/angular.js"/scriptscript src="replace.js"/script/html

首先我们来和replace进行一个对比：

<!doctype html>
<html ng-app="MyModule">
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<hello>
			<div>这里是指令内部的内容。</div>
		</hello>
	</body>
	<script src="framework/angular-1.3.0.14/angular.js"></script>
	<script src="replace.js"></script>
</html>

我们看看replace中的代码：

var myModule = angular.module("MyModule",[]);
myModule.directive("hello",function() {
    return {
    	restrict:"AE",template:"<div>Hello everyone!</div>",replace:true
    } 
});

这时候我们很清楚的看到下面的DOM结构：

也就是说我们的template内容把<hello></hello>标签内部的div元素移除了，这有时候不是我们希望看到的结果，因为这种方式完全无法完成标签的嵌套!于是才引入了我们的transclude属性。

我们使用transclude来完成标签的嵌套工作：

<!doctype html>
<html ng-app="MyModule">
	<head>
		<meta charset="utf-8">
	</head>
	<body>
		<hello>
			<div>这里是指令内部的内容。</div>
		</hello>
	</body>
	<script src="framework/angular-1.3.0.14/angular.js"></script>
	<script src="transclude.js"></script>
</html>

我们看看transcude在内部是如何完成的：

var myModule = angular.module("MyModule",transclude:true,template:"<div>Hello everyone!<div ng-transclude></div></div>"
    } 
});

很显然首先需要把transclude设置为true,然后在template中进行修改， 其中<div ng-transclude></div>就是告诉ng把hello标签内部的内容全部放在ng-transclude所在的位置。
DOM结构如下：

这就比较容易理解了，这里的hello标签没有被替换掉，因为没有指定replace:true，至于内部<div ng-transclude></div>还是会原封不动的保存，只是内部原来的DOM结构被这个ng-transclude指定的div包裹起来了!而且内部原来的DOM也被添加了一个内置的class，也就是ng-scope，这一点一定要注意!

我们在最后给出一个综合的例子：

<html ng-app='expanderModule'>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<link rel="stylesheet" type="text/css" href="ExpanderSimple.css"/>
		<script src="framework/angular-1.3.0.14/angular.js"></script>
		<script src="ExpanderSimple.js"></script>
	</head>
	<body>
	<!--指定一个controller为SomeController-->
		<div ng-controller='SomeController'>
		<!--自定义指令expander-->
			<expander class='expander' expander-title='title'>
				{{text}}
			</expander>
		</div>
	</body>
</html>

我们看看expander指令的签名：

var expanderModule=angular.module('expanderModule',[]);
//expander指令
expanderModule.directive('expander',function() {
	return {
		restrict : 'EA',replace : true,//直接把expander替换掉了
		transclude : true,//transclude表示可以嵌套标签
		scope : {
			title : '=expanderTitle'
		//这里是双向绑定，使用了'='进行双向绑定!
		},//直接替换掉,ng-show通过参数'showMe'来决定是否显示。ng-transclude指定了就是expander内部添加到ng-transclude中
		template : '<div>'
				 + '<div class="title" ng-click="toggle()">{{title}}</div>'
				 + '<div class="body" ng-show="showMe" ng-transclude></div>'
				 + '</div>',//这里指定link函数
		link : function(scope,element,attrs) {
			scope.showMe = false;
			scope.toggle = function() {
				scope.showMe = !scope.showMe;
			}
		}
	}
});
//这里指定controller控制器
expanderModule.controller('SomeController',function($scope) {
	//在$scope中指定title和text
    $scope.title = '点击展开';
	$scope.text = '这里是内部的内容。';
});

至此，我们的transclude就可以理解了。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!