You are looking for ng-non-bindable:
<pre ng-non-bindable>
<code>
<bar-foo>bar foo</bar-foo>
</code>
</pre>
Question
I want to show a code snippet of how to use a directive. However, the directive exists in this application, so when I have
<pre>
<code>
<bar-foo>bar foo</bar-foo>
</code>
</pre>
I'm using highlight.js, but angular doesn't care much and applies the directive to the bar-foo element. How can I disable the directive for that specific element ?
La solution
You are looking for ng-non-bindable:
<pre ng-non-bindable>
<code>
<bar-foo>bar foo</bar-foo>
</code>
</pre>
Autres conseils
What I would is to add an attribute to <bar-foo>
element like <bar-foo data-is-disabled="{{true}}" >
. In the directive I would add at the very top of the link
method:
if ($scope.$eval(attrs.isDisabled)) return ;`
If I needed to make sure to clear all content probably before return I could do something like:
element.replaceWith('')