如何将角度数据模型显示为HTML？

Question

I have a data-model that needs to be converted or show up as html. Right now it just shows up as text.

html

<div ng-repeat="item in ornamentFigures" class="ornament-item">
    <label for="ornament-{{item.id}}">{{item.svg}}</label>
    <input type="radio" id="ornament-{{item.id}}" name="ornament-radio" />
</div>

controller

$scope.ornamentFigures = ornamentFigures.ornamentFigures;

service

MyApp.service('ornamentFigures', function(){

    this.ornamentFigures = [
        {id:'03', name:'wit', svg:'<svg></svg>'},
        {id:'03', name:'wit', svg:'<svg></svg>'},
        {id:'03', name:'wit', svg:'<svg></svg>'},
    ];

    return this;
});

Answer 1

Are you looking for ng-bind-html ?

Replace:

<label for="ornament-{{item.id}}">{{item.svg}}</label>

With:

<label for="ornament-{{item.id}}" ng-bind-html="item.svg"></label>

Also include ngSanitize in your module and include "angular-sanitize.js" in your application as per the documentation .

Instead of binding the data as is, it will render as html. Keep in mind there are security implications to this. You might want to try a different way if you can.