javascript - 包含一个 HTML/CSS/JS 文件作为代码，不渲染

Question

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

有没有办法在 Angular 或 jQuery 中做到这一点？我希望能够将 HTML、CSS 和潜在的 JS 文件作为代码包含在内，这些代码将通过代码渲染器(如 Prism 或类似的东西)运行。

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

我目前正在使用 Angular 指令循环遍历 JSON 文件并根据 JSON 中列出的内容推出 HTML block 。我的指令是:

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 中的“ anchor ”键)来抓取特定文件并仅输出代码。我目前可以将 pattern.anchor 与 ng-include 一起使用来输出呈现的 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/ $ sanitizer 。