How to block angularJS from parsing/running a directive or code block?

Question

My problem sounds easy but I haven't found a solution yet and I've searched for it a lot at google and here at SO.

I'd like to create a demo html page for my custom directive and in it I'd like to show the markup of the directive in a code block (similar to how it is in the angular docs). But I don't need it to be dynamic (no syntax highlighting, no tabs).

For me it would be OK to have the code just as plain text but Angular parses the directive and executes the code.

How can I block angular to execute the directive?

It should look like this:

Text that describes the directive ..............

    <directive1 parameter1="test"></directive1>

Then the rendered directive result here

What I've tried so far?

• move the ng-app below the description: Doesn't work (directive markup will be hidden)
• nesting in different html tags span, pre, code but none is working.
• placing the angular directive in an iframe. Not working, always empty in jsFiddle.

Here I've setup a simple jsFiddle demo. (My directive is a bit more complicated but it shows the problem.)

angular.module('myApp', [])

.directive('simpleDirective', function() {
    return {
        restrict: 'EA',
        template: 'I\'m a simple directive!'
    };
});

pre {
    background: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<h2>Usage of directive</h2>
<p>Here I'd like to describe my directive and show the directive in a code block
    (but how do I block angular to execute the directive?!)</p>
<pre><code>
    <simple-directive></simple-directive>
    </code>
</pre>
^--- the above directive must not run. 
<!--<div ng-app="myApp"> doesn't work-->
<p>The following directive code shows the result:</p>
<simple-directive></simple-directive>
<!-- </div> -->
</div>

Answer 1

One simple solution is set the element text with the html for directive:

angular.module('myApp', [])
.directive('code', function(){
    return{
        restrict:'E',
        link:function(scope, elem){
            elem.text('<simple-directive></simple-directive>')
        }
    }
});

Of course you could simplify this to feed the html from your data model and thereby have numerous blocks like this with scope defined by attributes or pull it from one of your templates in a script tag

Angular won't compile when you insert html outside of angular and don't use $compile

Another simple solution is put it in a script tag and set display:block on that tag.

HTML

<script id="script-block" type="text/demo">
    <simple-directive></simple-directive>
</script>

CSS

#script-block{    
    display:block;
    background: yellow
}

Script tag approach could also be made into a directive

Personally I would use a syntax highlighter to do all this for you. Lots of choices for those around

DEMO

Answer 2

You could always html encode the < and >:

So the <code> block looks like:

<code>&lt;simple-directive&gt;&lt;/simple-directive&gt;</code>

You could do this in JavaScript by doing something like this.

Edited Snippet:

angular.module('myApp', [])

.directive('simpleDirective', function() {
    return {
        restrict: 'EA',
        template: 'I\'m a simple directive!'
    };
});

pre {
    background: lightgray;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<h2>Usage of directive</h2>
<p>Here I'd like to describe my directive and show the directive in a code block
    (but how do I block angular to execute the directive?!)</p>
<pre><code>
    &lt;simple-directive&gt;&lt;/simple-directive&gt;
    </code>
</pre>
^--- the above directive must not run. 
<!--<div ng-app="myApp"> doesn't work-->
<p>The following directive code shows the result:</p>
<simple-directive></simple-directive>
<!-- </div> -->
</div>