Why is the transcluded directive displaying Name inside directive = Frank twice?
I believed I had a good grasp on transclusion, but this specific scenario has left me puzzled.
Check out this fiddle for more details
<div ng-app="myApp" ng-controller="myController">
<my-directive>Name in outer controller scope = {{name}}<my-directive/>
</div>
var app = angular.module("myApp", []);
app.controller("myController", function ($scope) {
$scope.name = 'George';
});
app.directive("myDirective", function () {
return {
restrict: 'E',
scope: {},
transclude: true,
template: '<div ng-transclude></div>' +
'<span>Name inside directive = {{name}}</span>',
link: function (scope) {
scope.name = 'Frank'
}
};
});