Question

我有一个页面，我使用ng-include将文件作为呈现的HTML拉入。我希望在它旁边包含与代码相同的文件。

有没有办法在Angular或jQuery中执行此操作？我希望能够将HTML，CSS和潜在的JS文件包含在代码中，这些代码将通过代码渲染器运行，如Prism或类似的东西。

这类似于jsfiddle或codepen，因为你可以在同一个窗口中看到代码和渲染视图，但我不需要它们连接（即编辑代码以查看渲染结果。）我只是想要从同一个文件中提取两个视图。

我目前正在使用Angular指令循环访问JSON文件，并根据JSON中列出的内容推出HTML块。我的指示是：</ p>

app.directive('patterns', function() {
    return {
        restrict: 'E',
        require: ['^ngType', 'ngTemplate'],
        scope: {
            ngType: '@',
            ngTemplate: '@'
        },
        templateUrl: 'patterns.html',
        controller: function($scope, $http, $sanitize) {
            var theType = $scope.ngType;
            $http.get('indexes/json/' + theType + '.json')
                .then(function(result) {
                    $scope.patterns = result.data;
                });

        },
        controllerAs: 'patterns',
        link: function(scope, iElement, iAttrs, ctrl) {
            scope.getType(iAttrs.ngType);
        }
    }
});

我想添加一些同样使用pattern.anchor的东西（基于＆＃34;锚点＆＃34;我在JSON中使用的键）来获取特定文件并仅输出代码。我现在可以使用带有ng-include的pattern.anchor来输出呈现的HTML，但不仅仅是代码。

Answer 1

是的，使用angular可以使用ngSanitize或$ sanitize服务。

这里有一个简单的例子：http://codepen.io/tipsoftheday/pen/jthks

angular.module('expressionsEscaping', ['ngSanitize'])
  .controller('ExpressionsEscapingCtrl', function ($scope, $sanitize) {
      $scope.msg = 'Hello, <b>World</b>!';
      $scope.safeMsg = $sanitize($scope.msg);
});

以及Angular文档中提供的更复杂的示例：https://docs.angularjs.org/api/ngSanitize/service/ $ sanitize。

Answer 2

＆符号划分的字符实体

在代码中，使用character entity code <和>替换所有尖括号<和>。实体代码被渲染为尖括号，但不会被处理。不幸的是，这并不保留文件的格式（请继续阅读以了解如何操作），因为所有空格都被压缩到一个不间断的空间。

&lt;strong&gt; The strong tag is shown rather
than rendered, but all whitespace characters
still get       compressed into a single space.
However, this <br /> break tag gets rendered rather
than shown. &lt;/strong&gt;

HTML提供了一个名为pre的块级元素。 pre标记内的任何内容都被视为预渲染，浏览器按原样显示。此块中的空格不会被压缩。这将保留代码的格式。

<pre>
  &lt;strong&gt; In this block, if I add     extra spaces, they are shown.
    If I move to a newline, that is shown as well.
  HTML tags still need to have<br />their angle brackets replaced
in order to be shown rather than rendered.&lt;/strong&gt;
</pre>

如果您使用JavaScript / AJAX来包含该文件，您可以先执行字符串替换功能，将尖括号替换为字符实体代码。如果您正在进行服务器端包含，则可以使用您选择的服务器端语言执行类似操作。

如果你想自动完成所有这些，Mike Feltman建议使用Angular的方法。

包含HTML / CSS / JS文件作为代码，不进行渲染

2 个答案: