Question

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

出于这个问题的目的，我可以说我有以下对象数组：

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元素时，例如<b>intro copy</b>中的modules[1].content，元素将呈现为字符串，而不是粗体显示文本喜欢它。

Answer 1

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

例如：

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

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

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

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标签？

1 个答案: