在Angular控制器或视图中允许html标签

Question

my contrller :

LandingApp.controller('LandingCtrl2', function($scope){
    $scope.articles = [
        {
            'imageSrc'   : IMG_DIR + 'spec9.jpg',
            'title'      : 'Stencils',
            'description': 'Plastic or thin metal stencils.<br/>100% Custom made'
        }
    ];
});

when i try in My ng repeat (...article in articles...) {{article.description}} i got ... stencils.<br/>100% .... , but i need break line or some other html tags. How can i solve this?

Answer 1

You need to make a method, which can tell AngularJS to render that string as a HTML

Example :

$scope.renderHtml = function (htmlCode) {
    return $sce.trustAsHtml(htmlCode);
}

And in your view :

<div ng-bind-html="renderHtml(article.description)"></div>

Don't forget to include $sce in your controller

LandingApp.controller('LandingCtrl2', function($scope,$sce){ ...