How to block angularJS from parsing / running a directive or code?
My problem sounds easy but I haven't found a solution yet and I've searched a lot on google and here on SO.
I would like to create a demo html page for my custom directive and in it I would 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).
It would be nice for me to have the code as plain text, but Angular parses the directive and executes the code.
How can I block Angular from executing a directive?
It should look like this:
Text that describes the directive ..............
<directive1 parameter1="test"></directive1>
Then the rendered directive result here
What have I tried so far?
- move ng app below description: doesn't work (directive markup will be hidden)
- nested in different html tags
span, pre, code
but none works. - placing Angular directive in
iframe
. Doesn't work, always empty in jsFiddle.
Here I have set up a simple jsFiddle demo. (My directive is a little 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>
source to share
One simple solution is to set an element text
with an html directive:
angular.module('myApp', [])
.directive('code', function(){
return{
restrict:'E',
link:function(scope, elem){
elem.text('<simple-directive></simple-directive>')
}
}
});
You could of course simplify this to pass the html from your data model and thus have many blocks like this with a scope defined by the attributes, or pull it from one of your templates in the script tag
Angular won't compile when pasting html outside angular and won't use $compile
Another simple solution is put in a script tag and set display:block
to that tag.
Html
<script id="script-block" type="text/demo">
<simple-directive></simple-directive>
</script>
CSS
#script-block{
display:block;
background: yellow
}
Script can also be injected into the directive
Personally, I used a syntax shortcut to do all of this for you. Many options for those around you
source to share
You can always html encode <
and >
:
So the block <code>
looks like this:
<code><simple-directive></simple-directive></code>
You can do it 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>
<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>
source to share