ng-transclude偽指令用於標記使用包含的最近父級的包含DOM的插入點。使用插入插槽名稱作為ng-transclude或ng-transclude-slot屬性的值。
示例1：
<!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">
<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>
<div ng-controller="ExampleController">
<input ng-model="title" aria-label="title">
<br/>
<pane title="{{title}}">
<span>{{text}}</span></pane>
</div>
</center>
</body>
</html>輸出：
示例2：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
simpleTranscludeExample
</title>
<script src=
"//code.angularjs.org/snapshot/angular.min.js">
</script>
</head>
<body ng-app="transcludeDemo">
<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>
<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>
</center>
</body>
</html>輸出：
示例3：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ng-transclude</title>
<script src=
"//code.angularjs.org/snapshot/angular.min.js">
</script>
</head>
<body ng-app="FallbackContentDemo">
<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>
<!-- 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>
</center>
</body>
</html>輸出：
相關用法
- AngularJS ng-if用法及代碼示例
- AngularJS ng-cut用法及代碼示例
- AngularJS ng-value用法及代碼示例
- AngularJS ng-src用法及代碼示例
- AngularJS ng-app用法及代碼示例
- AngularJS ng-csp用法及代碼示例
- AngularJS ng-jq用法及代碼示例
- AngularJS ng-required用法及代碼示例
- AngularJS ng-bind用法及代碼示例
- AngularJS ng-srcset用法及代碼示例
- AngularJS ng-paste用法及代碼示例
- AngularJS ng-submit用法及代碼示例
- AngularJS ng-style用法及代碼示例
- AngularJS ng-selected用法及代碼示例
注：本文由純淨天空篩選整理自jeetesh16大神的英文原創作品 AngularJS | ng-transclude Directive。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。