包含HTML/CSS/JS文件作为代码，未呈现

我有一个页面，我正在使用ng-include将文件作为呈现的HTML拉入。我想在代码旁边包含相同的文件。包含HTML/CSS/JS文件作为代码，未呈现

有没有办法在Angular或jQuery中做到这一点？我希望能够将HTML，CSS和潜在的JS文件包含为代码，这些代码将通过代码呈现器（如Prism或类似的代码）运行。

这与jsfiddle或codepen类似，因为您可以在同一个窗口中看到代码和呈现视图，但我不需要它们进行连接（即编辑代码以查看呈现的结果）。只想从同一个文件中拉出两个视图。

我目前正在使用Angular指令来遍历JSON文件，并根据JSON中列出的内容推出HTML块。我的指令是：

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（基于关“锚”键我有我的JSON）抓住一个特定的文件，只输出代码。我现在可以使用pattern.anchor和ng-include来输出呈现的HTML，但不仅仅是代码。

来源

2015-10-06 Bice

是的，使用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); 
});

，这里的角文档中有一个更复杂的例子：https://docs.angularjs.org/api/ngSanitize/service/ $消毒。

来源

2015-10-06 18:02:01

我在动态地拉动代码，从JSON文件创建一个URL路径。我如何让Angular从该文件中获取代码并使用它填充$ scope.msg，而不是像上面那样为它提供一个字符串？例如，我需要告诉我的指令“抓取/ {{variable}}。html文件夹中的文件，并只将代码放在页面上” – Bice

您基本上需要在url上执行$ http.get你想要的，然后通过消毒来运行结果。 –

and符 - 划定字符实体

在代码中，替换所有尖括号<和>与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的方法。

来源

2015-10-06 18:18:06

包含HTML/CSS/JS文件作为代码，未呈现

回答

相关问题