# 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:

<div ng-controller="Ctrl">
<tag>
<h1><a href="{{ url }}">{{ url }}</a></h1>
<img ng-src="{{ image }}" />
</tag>
</div>


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/

• Am i wrong or the third compile argument comes null? compile(tElement, tAttrs, transclude) – Ismael Jul 19 '13 at 14:39
• You should use link here instead of compile. link gets passed the scope as the first argument. – Asad Saeeduddin Apr 8 '14 at 16:27

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.
• In this specific case there is no benefit, but a directive will often process information into a particular object and include extra methods. Eg. I could create a tag object within the directive and expose this as part of the isolated scope. The tag object might have useful methods such as delete, which removes the entire node. You could then add a button inside the tag node which invokes tag.delete(). Whether you use a link or a button or whatever to invoke it is left up to the html that consumes the directive, and isn't predetermined by the directive. – Asad Saeeduddin Apr 8 '14 at 16:21