极客教程AngularJS ng-transclude指令
ng-transclude指令是用来标记最近的父级使用transclusion的DOM的_插入点的。使用transclusion槽名作为ng-transclude或ng-transclud-slot属性的值。如果被排除的内容有一个以上的DOM节点的空白文本节点，那么在被排除的内容被插入之前，这个元素的内容存在的文本将被丢弃。在这种情况下，如果被排除的内容是空的或者只包含一个空白文本节点，那么存在的内容将保持不变。为此，当没有提供反括内容时，它有助于提供后备内容。
语法： ng-transclude指令可以用以下方式定义。
作为元素:
<ng-transclude ng-transclude-slot="string">
...
</ng-transclude>
作为CSS类：
<element class="ng-transclude: string;"> ... </element>
作为属性:
<element ng-transclude="string">
...
</element>
参数值:
- ngTransclude。它指定了要为这个点插入的槽的名称。如果没有给出默认槽，或者它的值与属性的名称相同，或者包含空，则将利用默认槽。它是字符串类型的。
示例1：本示例描述了AngularJS中**ng-transclude指令的实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
</script>
</head>
<body ng-app="transcludeDemo"
style="text-align: center;">
<script>
angular.module('transcludeDemo', [])
.directive('pane', function () {
return {
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
template:
'<div style="border: 3px solid black;">' +
'<div style="background-color: limegreen">' +
'{{title.toUpperCase();}}</div>' +
'<ng-transclude></ng-transclude>' +
'</div>'
};
})
.controller(
'ExampleController', ['scope', function (scope) {
$scope.title = 'gfg';
}]);
</script>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>ng-transclude Directive</h3>
<div ng-controller="ExampleController">
<input ng-model="title" aria-label="title">
<br />
<pane title="{{title}}">
<span>{{text}}</span>
</pane>
</div>
</body>
</html>
输出:
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> simpleTransclude Example </title>
<script src=
"//code.angularjs.org/snapshot/angular.min.js">
</script>
</head>
<body ng-app="transcludeDemo" style="text-align: center;">
<script>
angular.module('transcludeDemo', [])
.directive('pane', function () {
return {
restrict: 'E',
transclude: true,
scope: {
title: '@'
},
template:
'<div style="border: 1px solid black;">' +
'<div style="background-color: green">' +
'{{title.toUpperCase();}}</div>' +
'<ng-transclude></ng-transclude>' +
'</div>'
};
})
.controller(
'ExampleController', ['scope', function (scope) {
scope.title = 'gfg';
scope.text = 'geeksforgeeks';
}]);
</script>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>ng-transclude Directive</h3>
<div ng-controller="ExampleController">
<input ng-model="title" aria-label="title">
<br />
<textarea ng-model="text" aria-label="text"></textarea>
<br />
<pane title="{{title}}">
<span>{{text.toUpperCase();}}</span>
</pane>
</div>
</body>
</html>
输出:
示例3：本示例描述了AngularJS中ng-transclude指令的实现，创建了自定义按钮。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-transclude</title>
<script src=
"//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js">
</script>
</head>
<body ng-app="FallbackContentDemo" style="text-align:center">
<script>
angular.module('FallbackContentDemo', [])
.directive('myButton', function () {
return {
restrict: 'E',
transclude: true,
scope: true,
template:
'<button style="cursor: wait;">' +
'<ng-transclude>' +
'<b style="color: green;">Click Me!</b>' +
'</ng-transclude>' +
'</button>'
};
});
</script>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>ng-transclude Directive</h3>
<!-- fallback button content -->
<my-button id="fallback"></my-button>
<!-- modified button content -->
<br>
<my-button id="modified">
<i style="color: blue;">Click Me!</i>
</my-button>
</body>
</html>
输出:
