我将如何呈现通过编译插入 AngularJS 的 html 标签？

Question

我正在创建一个 UI 允许用户创建预览 html 内容。

为了这个问题的目的，假设我有以下对象数组：

modules = [
    {
        id: 0,
        type: 'title',
        content: 'This is the title',
        subtitle: 'This is the subtitle'
    },
    {   
        id: 1,
        type: 'intro', 
        content: 'This is the <b>intro copy</b>. This is the intro copy!'
    },
    {   
        id: 2,
        type: 'title',
        content: 'This is the title'
    }
];

我创建了一个循环遍历对象以根据类型选择模板并使用 $compile 呈现不同模块的指令。

app.directive('module', function( $compile ){

    // Define templates as strings
    var titleTemplate = '<h1>' + 
                            '{{ module.content }}' + 
                        '</h1>' +
                        '<h3 ng-show="module.subtitle">{{ module.subtitle }}</h3>';

    var introTemplate = '<p>' +
                            '{{ module.content }}' +
                        '</p>' + 
                        '<p ng-show="module.secondContent"><em>{{ module.secondContent }}</em></p>';

    // Select the current template by value passed in through scope.module.type

    var getTemplate = function(moduleType) {

        var template = '';

        switch(moduleType) {
            case 'title':
                template = titleTemplate;
                break;
            case 'intro':
                template = introTemplate;
                break;
            case 'ribbon': 
                template = ribbonTemplate; 
        }

        return template;

    };

    // Pass the scope through to the template for access in the module

    var linker = function( scope, element, attrs ) {
        element.html( getTemplate( scope.module.type ) ).show();
        $compile( element.contents() )( scope );
        console.log(attrs);
    };

    return {
        restrict: 'E',
        link: linker,
        replace: true,
        scope: {
            module : '='
        }
    }
});

最后，在 html 我有

<module module="module" ng-repeat="module in modules"></module>

我遇到运行的问题是，当我在内容中有一个 html 元素时，例如 modules[1].content 中的 <b>intro copy</b>，该元素是呈现为字符串，而不是像预期的那样将文本加粗。

Answer 1

要从 angular 中的 var 解释 HTML，您需要使用 ng-bind-html 指令。它将解释 HTML 而不是仅将其显示为字符串。

例子：

$scope.myhtmlvar = "<b>I'm bold</b";

<div ng-bind-html="myhtmlvar"></div>

这看起来不错，但实际上行不通。为什么？有充分的理由：解释 HTML 是不安全的。想象一下解释整个 html，用户可以根据需要添加任意多的 javascript，并且可以完全注入自己的行为并破解您的应用程序。为避免此问题，您需要将 ngSanitize angular 库添加到您的项目中。

https://ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-sanitize.js

并将其注册到您的应用程序

var app = angular.module('testApp', ['ngSanitize']);

从现在开始，您的 ng-bind-html 将自动清理您给他的 html。前面的两行现在应该可以工作了。

这里有一个working plunker例子

希望对您有所帮助。

我将如何呈现通过编译插入 AngularJS 的 html 标签？

How would I render html tags inserted via compile in AngularJS?

javascript

angularjs

angularjs-directive

angularjs-compile