angularjs: how to disable directive for a specific element

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 ?

Answer 1

You are looking for ng-non-bindable:

<pre ng-non-bindable>
    <code>
        <bar-foo>bar foo</bar-foo>
    </code>
</pre>

Answer 2

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('')