Можно ли печатать обычные html-теги с угловыми?

Question

Я хочу знать, если можно напечатать некоторые html-теги (текст с привязками) от $scope переменной к представлению вывода? Посмотрите на fiddle, я пытаюсь распечатать привязки из моей базы данных, но они иногда скрыты в тексте. Большое спасибо! :)

HTML:

<div ng-app> 
    <h2>Html test</h2> 
    <div ng-controller="TodoCtrl"> 
    <p data-ng-repeat="line in anchors"> 
     {{line}} 
    </p> 
    </div> 
</div> 

контроллер:

function TodoCtrl($scope) { 
    $scope.anchors = [ 
    "<a href='#'>Something</a>", 
    "Angular ignores html tags :(" 
    ]; 
} 

Answer 1

Да это possbly с ng-bind-html директивы

angular.module('app',['ngSanitize']) 
 
.controller('TodoCtrl', 
 
function TodoCtrl($scope) { 
 
    $scope.anchors = ["<a href='#'>Something</a>", "Angular not ignores html tags :)"]; 
 
});

h2 { 
 
    font-size: 18px; 
 
    font-weight: bold; 
 
    margin-bottom: 1em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-sanitize.js"></script> 
 
<div ng-app="app"> 
 
    <h2>Html test</h2> 
 
    <div ng-controller="TodoCtrl"> 
 
    <p data-ng-repeat="line in anchors" ng-bind-html="line"> 
 
     
 
    </p> 
 
    </div> 
 
</div>

Answer 2

Если вы пометили HTML как надежный, вы можете ввести его в DOM с помощью ng-bind-html.

angular.module('myApp', []) 
 
    .directive('myDirective', function($sce){ 
 
    return { 
 
     link: function(scope) { 
 
      scope.trustedHTML = $sce.trustAsHtml('<h1>This is html</h1><h2>Subtitle</h2>'); 
 
     } 
 
    } 
 
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular.js"></script> 
 

 
<div ng-app="myApp" my-directive> 
 
    <div data-ng-bind-html="trustedHTML"></div> 
 
</div>