AngularJS directive that manually transcludes content and has isolated scope I would like to hear the opinion of more experienced AngularJS developers on whether the following directive is best practice...

I was trying to make to make a directive that will include HTML that:


Can include compiled elements (other directives, like ng-src in the
example below) 
Interpolated values ({{ value }}) 
Can include values/functions from the parent scope without modifying it (i.e. the
directive has isolated scope)


Example usage: 

&lt;div ng-controller="Ctrl"&gt;
&lt;tag&gt;
    &lt;h1&gt;&lt;a href="{{ url }}"&gt;{{ url }}&lt;/a&gt;&lt;/h1&gt;
    &lt;img ng-src="{{ image }}" /&gt;
&lt;/tag&gt;
&lt;/div&gt;


Controller and directive implementation:

var testapp = angular.module('testapp', []);

var Ctrl = function($scope) {
    $scope.url = "http://google.com";
    $scope.image = "https://www.google.gr/images/srpr/logo4w.png";
};

testapp.directive('tag', function() {
  return {
    restrict: 'E',
    transclude: true,
    scope: { },
    compile: function compile(tElement, tAttrs, transclude) {
        return function(scope) {
            transclude(scope.$parent, function(clone) {
                tElement.append(clone);
            });
        }
    }
  }
});


Fiddle: http://jsfiddle.net/x5WcB/3/
I am a bit confused, your directive basically would do what Angular already does?

When I comment out the entire testapp.directive('tag', function() { block, I see no change in the functionality of this code in fiddle.. I think you need a more extensive example for us to provide a meaningful review.

Other than that:


Your code looks fine to me
JsHint.com cannot find anything wrong besides some missing semicolons
You have 0 comments in your code