My goal is to create a directive that replaces an anchor element with a div element under certain conditions. The content of the anchor element should remain unchanged and be included within the new element.
The concept involves having an attribute on the anchor element, where the value is an expression that needs to be evaluated to determine whether the replacement should occur or not.
In the case where fooBar is true:
<a ys-deactivate-anchor="{{ fooBar == true }}"><span>Hallo</span></a>
the above should transform into:
<div ys-deactivate-anchor="{{ fooBar == true }}"><span>Hallo</span></div>
Currently, my directive implementation looks like this:
commonModule.directive('ysDeactivateAnchor', function () {
return{
restrict: 'A',
scope: false,
replace: true,
template: function (element, attributes) {
return "<div ng-transclude></div>";
},
transclude: true
};
});
The replacement functionality works as expected. However, I am now exploring ways to only trigger the replacement when the specified expression evaluates to true. One approach I considered involved checking the attribute within the template function. The challenge lies in the fact that the template function only accepts static values since there is no available scope for evaluating expressions at that stage.
While I could manually handle the replacement in the link function without using replace and transclusion, I am curious if there is a way to achieve this without resorting to such manual intervention.