Angular ng-repeat and $sce.trustAsHtml

Question

I’m developing a system where goes PHP in PDO, Angular with crud getting faster and picking up the list that comes from the Mysql database, the version of Angularjs is v1.5.8.

So I’m caught in a part $sce.trustAsHtml and I’ve looked this site as a reference. That’s basically what I want but it doesn’t work. I also saw this example which is in C# but no problem.

Code is the one without ng-repeat only that it is simple, I need that the list of data that comes from the base with HTML code is converted and does not present <b>oi</b> and yes hi.

Let me illustrate this better: the list comes from the database and converts to JSON getting:

{ nome: `<b>andré</b>`' }

Only it displays in View in HTML <b>andré</b>

my code in js controller looks like this:

var app = angular.module('myAngularApp',[]);   
app.controller('Controller',function($scope, $http, $sce){

$scope.getOldFour = function () {
    $http({
        method: 'GET',
        url: 'Controller/noticias-controller/read.php'           
    }).then(function successCallback(response) {

        for (var i = 0; i < response.data.length; i++) {
            response.data[i].records = $sce.trustAsHtml(response.data[i].records);
        }


        $scope.noticiasFour = response.data;
        //$scope.noticiasFour = response.data.records;
    });
  }    
});

and from what I saw in html I have to use this tag ng-bind-html

This is my HTML:

<ul class="news_tab" ng-init="getOldFour()">
  <li ng-repeat="OldFour in noticiasFour">                                                                
    <div class="media">
      <div class="media-left">
        <a class="news_img" href="#">
          <img class="media-object" src="App_Imagens/Noticias/Teste.jpg" alt="img">
        </a>
      </div>
      <div class="media-body">
        <div ng-bind-html="noticiasFourr"></div>
        <a href="#" ng-bind-html="">{{OldFour.descricao}}</a>
        <span class="feed_date">{{OldFour.data_postagem}}</span>
      </div>
    </div>
  </li>
</ul>

I’ve tried to <a href="#" ng-bind-html="OldFour.descricao"></a> and nothing

In PHP in the controller that will read and make the list already tried too html_entity_decode() and it didn’t work either.

To send to the database already used htmlentities() leaving the string inside the larger comic instead of going <b></b>

I’ve tried every way and it doesn’t work, I’ve searched several sites, does anyone have a solution? An experience similar to resolution ?

Answer 1

I can’t quite understand your problem, but it’s pretty easy to do what you need.

First of all it is necessary to have the module ngSanitize referenced, then just use the directive ng-bind-html with the HTML that needs to be shown.

angular.module('app', ['ngSanitize']);

angular.module('app').controller('mainController', mainControllerFn);

function mainControllerFn(){
  var ctrl = this;
  ctrl.bindHtml = '<b>Andre</b>';
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://code.angularjs.org/1.2.23/angular-sanitize.min.js"></script>

<div ng-app="app">
  <div ng-controller="mainController as mainCtrl">
    {{mainCtrl.bindHtml}}
        
    <div ng-bind-html="mainCtrl.bindHtml">
      
    </div>
  </div>  
</div>