splincode web-developer splincode web-developer - 1 month ago 12
AngularJS Question

How replace html in template angular

I have a variable that stores data

this.storage = { decription: 'text <br> info \n' };


In html I bring it

<div> {{ ::$ctrl.storage.decription }} </div>


However, the text is displayed without any formatting, but I would like it to be like html, how to fix it?

Answer

Basically to use ng-bind-html you need to tell angular that the HTML content string is trusted to know more about this you can refer this article in angular docs,so to that add below code in your JS

$scope.storage.description =   $sce.trustAsHtml('text <br> info \n');

But simply this line will throw you an error saying 'unknown provider' to use that you need to have angular-sanitize.js in order to inject $sce in your controller and ngSanitize in your angular module like var app = angular.module('app',['ngSanitize']);

var app = angular.module('app',['ngSanitize']);
app.controller('Ctrl',function($scope,$sce){
   

$scope.storage = {};
  
$scope.storage.description =   $sce.trustAsHtml('text <br> info \n');
  
  });
<script data-require="angularjs@1.5.8" data-semver="1.5.8" src="https://opensource.keycdn.com/angularjs/1.5.8/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"></script>




<div ng-app="app" ng-controller="Ctrl"> 
  
  
<div ng-bind-html="storage.description"></div>

</div>