Question

我的问题听起来很简单，但我还没有找到解决方案，而且我在谷歌和SO搜索了很多。

我想为我的自定义指令创建一个演示html页面，在其中我想在代码块中显示指令的标记（类似于它在angular docs中的方式）。但我不需要它是动态的（没有语法高亮，没有标签）。

对我来说，将代码与纯文本一样可以，但Angular会解析该指令并执行代码。

如何阻止角度来执行指令？

它应该是这样的：

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

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

Then the rendered directive result here

到目前为止我尝试了什么？

将ng-app移到描述下方：不起作用（指令标记将被隐藏）
嵌套在不同的html标记span, pre, code中但没有一个正常工作。
将角度指令放在iframe中。不工作，在jsFiddle中总是空的。

Here我已经设置了一个简单的jsFiddle演示。（我的指令有点复杂，但它显示了问题。）

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

一个简单的解决方案是使用html for directive：

设置元素text

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

当然，您可以简化此操作以从数据模型中提供html，从而拥有许多像这样的块，其范围由属性定义，或者从脚本标记中的一个模板中提取

当你在角度之外插入html并且不使用$compile时，Angular不会编译

另一个简单的解决方案是将其放在脚本标记中并在该标记上设置display:block。

HTML

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

CSS

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

脚本标记方法也可以作为指令

就我个人而言，我会使用语法荧光笔为你做这一切。

周围有很多选择

的 DEMO

Answer 2

你总是可以html编码<和>：

所以<code>块看起来像：

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

您可以通过执行something like this在JavaScript中执行此操作。

已编辑的代码段

＆＃13;

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

＆＃13;

pre {
    background: lightgray;
}

＆＃13;

<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>

＆＃13;

如何阻止angularJS解析/运行指令或代码块？

2 个答案: