Question

我使用Angular指令从JSON文件输出内容，并且需要使用该JSON中的内容来查找和输出外部文件中的原始HTML（从文件中读取）。

这是我的指令代码：

app.filter('to_trusted', ['$sce', function($sce){
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]);

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

这是我的模板：

<div class="pattern">
    <iframe src="{{ 'individuals/' + pattern.anchor + '/index.html'}}" frameborder="0" id="frame_{{pattern.id}}" class="frame-mobile" />
    <!-- Code view -->
    <div class="pattern__code">
        <div>
        <pre class="pattern__code--markup">
            <code class="language-markup line-numbers" ng-bind-html="'patterns/' + pattern.anchor + '.html' | to_trusted" prism></code>
        </pre> 
        </div>
        <div>
        <pre class="pattern__code--css">
            <code class="language-scss line-numbers" ng-include="'individuals/' + pattern.anchor + '/scss/_' + pattern.anchor + '.scss'" prism></code>
        </pre> 
        </div>
    </div>
</div>

以下是我将从中获取的示例JSON文件：

[
    {
        "id": "lists", 
        "anchor": "lists", 
        "title": "Lists", 
        "description": "",
        "guidelines": "", 
        "updated": "2015-08-17"
    }
]

我可以将渲染的HTML格式拉入模式。对于代码视图，CSS加载正常，因为它被视为文本。然而，HTML不会呈现，因为我认为HTML需要编码。

这让我相信我应该在控制器本身读取文件，除了我不知道如何添加到我现有的指令/控制器来访问pattern.anchor，以便模板的每次迭代都将：

从相应路径（patterns / = pattern.anchor + .html）
编码HTML并“信任”它
将原始HTML输出到相应的<code>元素

我错过了什么？这是一个Plunker：http://plnkr.co/edit/SqXASrV5mB6mqwxhWHoU

从外部文件中获取原始HTML（可信）

0 个答案: