I am facing an issue with a custom Angular directive that is used in several of my AngularJS views. The directive is set to transclude, but the wrapped content is not appearing.
app.directive('card', [function() {
return {
restrict: "E",
scope: {
sysStack: "=",
cardname: "@"
},
transclude: true,
templateUrl: 'partials/directives/card.html',
replace:true
}
}]);
The content of card.html appears like this
<section class="card" ng-transclude>
</section>
The CSS styles the section tag as a flexbox with a drop shadow and a background color, which displays correctly. However, the wrapped content and scoped attributes do not show up. A test in one of my views looks like this
<card sys-stack="2" cardname="test">
testing 123
</card>
The text "testing 123" does not appear, and the attributes seem to be missing from the DOM. The flexbox section rendered by the card directive is visible, but the wrapped content is not. Can anyone help me understand this issue?
I have made updates to clarify my question
The card.html renders in the DOM without any issues, but the attached attributes and wrapped content are not visible.