javascript - 将 HTML(用户定义的指令)插入 View - AngularJS

Question

这是我在 Stackoverflow 上的第一个问题，所以请原谅我犯的任何错误。我试图在 View 中显示模板中的一些 HTML，我在以下指令中使用了这些 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>")' }

    ];

有什么方法可以显示模板中的实际内容吗？我已经经历过几个解决方案，例如 Angularjs: preview sanitized html在 Stackoverflow 上建议使用 $sce.parseAsHtml和 $sce.trustAsHtml但它们不适用于我的代码。

Answer 1

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

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

在我看来，我可以使用过滤器显示 HTML:

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

如果开箱即用，您还需要像这样在 Angular 配置中设置资源白名单:

$sceDelegateProvider.resourceUrlWhitelist(['self', 'https://www.google.com/maps/embed/v1/**']);

(谷歌链接只是为了证明您可以从另一个网站/服务导入外部 HTML 并将其呈现为可信来源)