AngularJS Directive指令中transclude属性

本文主要是介绍AngularJS Directive指令中transclude属性，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

定义指令对象时，可以不添加transclude属性，如果添加该属性，那么它的属性值是布尔类型的，默认值为false，表示不开启属性，如果设置为true值时，则开启了该属性；当开启了transclude属性后，就可以在模板中通过ng-transclude方式替换指令元素中的内容。假如指令元素中的内容如下

<div>hello!</div>

指令模板中的内容代码如下

<h3>I am template</h3>

指令元素中，调用ng-transclude指令后，原有指令元素中的内容则变成如下形式。

<div ng-transclude>hello!<h3>I am template</h3></div>

在添加transclude属性并开启成功后，可以将调用指令后的元素内容替换为指令中的模板内.
如果模板中的内容没有元素标签，而是纯文本内容，那么，在替换时，则会自动添加一个<span>标签，不仅仅是内容的替换，还可以通过变量来传递数据。

如下示例：设置指令对象中的transclude属性

功能描述
在自定义指令的模板中，添加一个文本输入框，并通过ng-model绑定名为“text”的变量。另外，再添加一个<div>元素，并添加ng-transclude属性，通过该属性替换<div>元素的内容
代码如下：

<!DOCTYPE html>
<html ng-app="a8_3">
<head><title>设置指令对象中的transclude属性</title><script src="/node_modules/angular/angular.min.js"></script><style type="text/css">.frame {padding: 2px 8px;margin: 0px;font-size: 12px;width: 320px;background-color: #eee;}.tip {font-size: 9px;color: #666;margin: 3px 5px;}</style><script type="text/ng-template" id="tpl"><div class="frame"><input type="text" ng-model="text" /><div ng-transclude class="tip"></div></div></script>
</head>
<body><ts-tplscipt>{{text}}</ts-tplscipt>   <script type="text/javascript">var app = angular.module('a8_3', [])   .directive('tsTplscipt', function () {return {restrict: 'EAC',templateUrl: 'tpl',transclude: true};});</script>
</body>
</html>

程序运行如下
源码分析
定义了一个名为“tsTplscipt”的指令。添加“transclude”属性，并将它的值设置为true，表示开启该属性的功能。
然后，在指令对应模板的元素中，通过添加“ng-transclude”属性的方式，调用“transclude”属性的功能，，该元素中的内容将会被指令元素原有内容所替代，效果见上图。
TIP:
指令中使用“transclude”属性的作用是为了保留指令元素中原有的内容。在通常情况下，使用自定义的指令元素后，原有内容都被指令中的模板替换，因此，为了保留这部分内容，引入了“transclude”属性，通过在模板中给元素添加“ng-transclude”属性，就可以获取指令元素中原有的内容。