<!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;
}