<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Angular Directives - Transclude</title>
<link rel="stylesheet" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="demoApp">
<div ng-controller="myCtrl">
<div id="divLeft">
<h3>Use Transclude: true</h3>
<div class="domElement" my-transclude-true>
<div class='itemTransc'>parentScope: '{{parentScope.name}}'</div>
</div>
</div>
<div id="divRight">
<h3>Use Transclude: false</h3>
<div class="domElement" my-transclude-false>
<div class='itemTransc'>parentScope: '{{parentScope.name}}'</div>
</div>
</div>
</div>
</body>
</html>
var app = angular.module('demoApp', []);
app.controller('myCtrl', ['$scope',function($scope){
$scope.parentScope = {
name: 'xMen',
mail: 'xMen@gmail.com'
};
}]);
app.directive('myTranscludeFalse', function () {
return {
scope: {},
transclude: false,
template: "<div class='myTransc'>" +
"<span>Directive's content</span>" +
"<div class='wrapTransc' ng-transclude>Transclude: false</div>" +
"</div>"
}
});
app.directive('myTranscludeTrue', function () {
return {
scope: {},
transclude: true,
template: "<div class='myTransc'>" +
"<span>Directive's content</span>" +
"<div class='wrapTransc' ng-transclude>Transclude: false</div>" +
"</div>"
}
});
#divLeft{
width: 45%;
float: left;
padding-right: 5%;
border-right: 1px solid black;
}
#divRight{
width: 45%;
float: right;
}
.domElement{
padding: 10px;
text-align: center;
background-color: #97C6F4;
}
.myTransc{
padding: 10px;
background-color: #FFE599;
}
.wrapTransc{
padding: 10px;
color: white;
background-color: #B9E0A5;
}
.itemTransc{
color: black;
background-color: white;
}