This is my code:
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<testel title="{{data.title}}">
<input ng-model="data.title">
<h3>Transclude title: {{title}}</h3>
<h3>Transclude data title: {{data.title}}</h3>
</testel>
</div>
<script>
angular.module('myApp',[])
.controller('Ctrl',function($scope){
$scope.data={};
$scope.data.title="Gas";
})
.directive('testel', function(){
return {
restrict: 'E',
scope: {
title: '@'
},
transclude: true,
templateUrl: "./transclude.html",
link: function(scope, element, attrs, ctrl, transcludeFn) {
console.log(scope.$$nextSibling);
}
}
});
</script>
</body>
</html>
and transclude.html:
<h3>Template title: {{title}}</h3>
<h3>Template data title:{{data.title}}</h3>
<ng-transclude></ng-transclude>
Why am I getting null from console.log(scope.$$nextSibling)? I was waiting the transclusion scope instead.
Also, how may I console.log the transclusion scope itself?