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:

    {{ url }}
    

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

StackExchange Code Review Q#24411, answer score: 2