javascript - Text inside tag outside of output tag in Angular.js -

i have link tag in html:

<link url="http://google.com">google</link> 

and code transform <a> tag:

app.directive('link', function() {     return {         restrict: 'e',         transclude: true,         replace: true,         scope: {             url: '@'         },         template: '<a href="{{url}}" ng-transclude></a>'     } }); 

but using text google outside , url not removed (it copy if link tag). if use attribute works fine <div link url="http://google.com">google</div> what's wrong?

here is
jsfiddle.

i think know reason this, link if html tag (that head include stylesheet) single self closing tag, , seams how parser parse before angular executed.