Question

这是我关于Stackoverflow的第一个问题所以请原谅我犯的任何错误。我试图在视图中显示模板中的一些HTML，我在以下指令中使用它：

app.directive('picturegallery', function () {
return {
    scope: true,
    restrict: "E",
    templateUrl: '../../Controllers/pictureGallery.html'
}

}）;

我通过点击应用.push来执行此操作，因此<picturegallery></picturegallery>已添加到$scope.sections：

app.directive("picgallery", function ($compile) {
return function (scope, element, attrs) {
    element.bind("click", function () {
        scope.count++;
        scope.sections.push({ desc: "<picturegallery></picturegallery>" });
        angular.element(document.getElementById('template-id')).append($compile("<picturegallery></picturegallery>")(scope));

    });
};

}）;

我使用$sce.parseAsHtml，如下所示，它可以正常工作，但HTML仍然无法转换为模板指向的实际HTML，只是显示为<picturegallery></picturegallery>。我希望pictureGallery.html指向的实际模板显示出来。

$scope.sections = [
        { desc: '<div>hello</div>' },
        { desc: '$sce.parseAsHtml("<picturegallery></picturegallery>")' }

    ];

有什么方法可以显示模板中的实际内容吗？我已经在Stackoverflow上通过了一些像Angularjs: preview sanitized html这样的解决方案，建议使用$sce.parseAsHtml和$sce.trustAsHtml，但它们对我的代码不起作用。

Answer 1

对我来说，遇到类似问题的最佳解决方案是创建一个自定义过滤器，允许我呈现导入的HTML。

TranslatableListener

在我的视图中，我可以使用过滤器显示HTML：

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

如果这不能开箱即用，您还需要在角度配置中设置资源白名单，如下所示：

<div>{{myCtrl.someHTML | unsafe}}</div>

（谷歌链接仅用于证明您可以从其他网站/服务导入外部HTML并将其作为可信来源呈现）

Answer 2

如果要从模板中呈现HTML，只需在HTML中调用指令：

<picturegallery></picturegallery>

这将加载指令，该指令将加载模板。

将HTML（用户定义的指令）插入视图 - AngularJS

2 个答案: