Angular ng-repeat and $ sce.trustAsHtml

Question

Angular ng-repeat and $ sce.trustAsHtml

Navigation

#1 by (1 votes)

0

I'm developing a system where PHP goes in PDO, Angular with crud getting faster and picking up the list coming from the MySQL database, the version of AngularJS is v1.5.8.

So I'm caught in a $sce.trustAsHtml part and I've already looked at that site as a reference. It's basically what I want but it does not work. I've also seen this example which is in C # but no problem.

Code is the one without ng-repeat but it is simple, I need the data list that comes from the base with HTML code to be converted and does not have oi and yes hi . >

I'll give you a better example: the list comes from the database and converts to JSON:

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

Only shows in the View in HTML andré

My code in the 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 the 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 <a href="#" ng-bind-html="OldFour.descricao"></a> and nothing

In PHP in the controller that will perform the read and make the list I already tried html_entity_decode() and it did not work either.

To send to the database I already used htmlentities() leaving the string inside the bd greater, instead of going 

I've tried it anyway and it does not work, I've looked it up on several sites, does anyone have a solution? A similar resolution experience?

angularjs

asked by anonymous 16.02.2017 / 14:29

1 answer

Read a BLOB corresponding to an image JS scrollTo effect, make working by clicking on li and not only on a href="#"

score 1 · Answer 1

You can not understand your problem well, but it's very easy to do what you need.

First of all you need to have the module ngSanitize referenced, then just use the ng-bind-html directive 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><scriptsrc="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>