How can I process/compile/resolve the contents of enclosed HTML in my directives.
The specific directive being discussed is:
angular.module('transclude', [])
.directive('heading', function(){
return {
restrict: 'E',
replace: true,
transclude: true,
scope: {
cls: '@'
},
template: '<h1 ng-transclude></h1>'
};
});
and here is the accompanying HTML code:
<div ng-app="transclude">
<div ng-controller="Ctrl">
<heading cls="beans">
<span class="{{cls}}">{{cls}}</span>
</heading>
</div>
</div>
A simplified plunker has been created to illustrate the issue: http://jsfiddle.net/ys9fekss/
It can be seen that I am expecting the HTML within my directive to have the {{cls}} tags replaced with the literal string 'beans' both as an attribute and inside the content.
I've been grappling with this problem for quite some time - exploring scoping, compiling, link functions, and more, but nothing seems to work.
My objective is to create a validator directive capable of wrapping any type of field.
What steps should I take to enable Angular to interpret the HTML within that field?
UPDATE: As I continue to face challenges with this issue, I have shared the actual modified HTML (as per the solution provided below) demonstrating the problem associated with the shared scope:
In the example above, setting scope: true eliminates repeated values but prevents the parsing of the name="" attribute!
What I require is to accomplish both of these simultaneously!