I'm trying to implement a directive which replaces an anchor element with an div element but only in a certain case. The content of the anchor element should not be replaced but be included in the new element.
The idea is that an anchor element can have an attribute whose value is an expression which should be evaluated to check whether it has to be replaced or not.
If fooBar is true:
<a ys-deactivate-anchor="{{ fooBar == true }}"><span>Hallo</span></a>
should become
<div ys-deactivate-anchor="{{ fooBar == true }}"><span>Hallo</span></div>
My directive currently looks like that:
commonModule.directive('ysDeactivateAnchor', function () {
return{
restrict: 'A',
scope: false,
replace: true,
template: function (elme, attrs) {
return "<div ng-transclude></div>";
},
transclude: true
};
});
The replacement works as expected by now I'm looking for a way to only replace the element when the expression is true. Currently I have no idea how to do this beside doing the whole replacement by myself. I tried to work with the template function to check an attribute. The problem is, that in the template function you can only get a static values as there's no scope yet which can be used to evaluate an expression.
Of course I could skip the replace and transclusion stuff and do the replacement in the link function by my self but I wonder if I could somehow avoid this.