Recently, I came across a peculiar issue with an attribute directive in Angular. This directive simply adds a class name to the element where it is applied, specifically to a table cell <td>. Oddly enough, when I set transclude: true in the directive definition, it unexpectedly replaces the content of the table cell. This problem has me puzzled as it's my first time encountering it.
My understanding was that transclude should maintain the existing content, so I'm stumped on why this isn't happening. Can anyone provide some insight or potential solutions?
Below is the directive code snippet:
angular.module('app', []).directive('indicator', function () {
return {
restrict: 'AC',
replace: true,
transclude: true,
link: function ($scope, $elem, $attrs) {
if($attrs.type) {
$elem.addClass('indicator-'+$attrs.type);
}
else {
$elem.addClass('indicator');
}
}
};});
To use this directive in HTML, it would be implemented like so:
<td indicator type="someType">5000</td>
Upon testing, I found that setting transclude to false works correctly, but once it's set to true, the class gets added while the contents of the table cell vanish.