I'm trying to wrap a directive in another directive, and am having an issue. For example, using the UI Bootstrap tabs and pane directive:
I want to turn something like:
<tabs>
<pane heading="FOO">...</pane>
<pane heading="BAR">...</pane>
</tabs>
in to:
<tabs>
<pane-wrapper heading="FOO">...</pane-wrapper>
<pane-wrapper heading="BAR">...</pane-wrapper>
</tabs>
where pane-wrapper directive looks like:
angular.module('test').directive('paneWrapper', function(){
return{
restrict: 'E',
replace: true,
template: "<pane ng-transclude></pane>" //somehow need to pass along the heading attribute
}
});
The reason I want to do this is because, I don't want to heavily modify pane, I want to wrap it and perhaps have multiple directives in one etc. I suppose I could completely copy the pane directive and change it as one option.
Anyway, I get the error:
Error: Multiple directives [ngTransclude, ngTransclude] asking for 'ngTransclude' controller on <div class='tab-pane' ng-class='active: selected' ng-show='selected' ng-tranclude=''>
Thoughts?
I shouldn't need to create a pane-wrapper scope right? There is a parent scope with various data... I just want to wrap this and create a reusable component.
Have you tried using
iElement.html($compile(<pane..)(scope));
remove the template property and rely on compiling the <pane> and updating iElement html directly.
You might want to use replace: true property in the wrapper directive.