CODEWITHSUNDEEP
javascriptangularjs
ketysek
ketysek

Reputation: 1219

Is it possible to print regular html tags with angular?

I want to know, if it's possible to print some html tags (text with anchors) from $scope variable to output view? Look at the fiddle, I'm trying to print anchors from my database, but they are sometimes hidden in text. Thank you very much! :)

html:

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

controller:

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

Upvotes: 1

Views: 771

Answers (2)

Grundy
Grundy

Reputation: 13381

Yes it is possbly with ng-bind-html directive

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>

Upvotes: 3

Etse
Etse

Reputation: 1245

If you mark the HTML as trusted you can inject it into the DOM with 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>

Upvotes: 0

Related Questions