AngularJS包含示例教程
时间：2020-02-23 14:29:37 来源:igfitidea点击:
前面我们讨论了自定义指令，在本教程中，我们将讨论指令中的transclusion。
包含(transclusion)是指通过引用将一个文档的内容包含在另一文档中（维基百科）。
包含(transclusion)提供了一种将模板传递给指令并显示它的方法。
在先前的教程中，我们使用template属性显示所需的模板。
让我们看下面的示例，看看如果在指令元素内定义模板会发生什么。
在以下示例中，我们创建了一个名为myEmployee的指令，该指令显示模板。
app.js
var app = angular.module('mainApp', []);
app.directive('myEmployee', function() {
return {
restrict: 'EA',
scope:{}, //isolate scope.
template: "<div>My First Directive.</div>"
};
});
我们在index.html文件的my-employee指令中包含了一个元素。
app.js
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Transclusion</title>
</head>
<body>
<div ng-app="mainApp">
<my-employee>
<div>Transcluded Element. This will not be displayed Since the transclude property is not enabled. </div>
</my-employee>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
您将在浏览器中看到以下输出。
不显示my-employee指令中的内容。
AngularJS提供tranclude属性以支持指令中的包含。
我们将在下面的部分中使用上述示例看到这一点。
指令示例中的包含
AngularJS提供了两个主要功能来支持包含。
第一个是在名为transclude的伪指令中使用的属性，并将其设置为true可启用转换；第二个是名为ng-transclude的伪指令，用于定义将外部内容放置在伪指令模板中的位置。
在下面的示例中，您可以看到这两个功能的使用。
我们已经修改了上面的示例以仅通过向myEmployee指令添加transclude属性并将其设置为true来支持包含。
app.js
var app = angular.module('mainApp', []);
app.directive('myEmployee', function() {
return {
restrict: 'EA',
scope:{}, //isolate scope.
transclude:true,
template: "<div ng-transclude></div><div>My First Directive.</div>"
};
});
ng-transclude是指示伪指令的指令，该插入点标记了使用包含的最接近父指示的被隐含DOM的插入点。
我们传入指令的模板将用ng-transclude指令替换元素。
在此示例中，我们用有意义的div内容替换了没有任何内容的div元素。
app.js
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Routing</title>
</head>
<body>
<div ng-app="mainApp">
<my-employee>
<div>Transcluded Element. Transclude property is enabled.</div>
</my-employee>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
