0

I got a solution to use AngularJS directive to let html understand my tag bold as the html tag b. So <bold>{{testWorks}}</bold> will style the text as bold when I have textWorks in the scope.

However, it doesn't work when I have {{testText}} where in the scope it is: $scope.testText = "<bold>Peter</bold>";

It also doesn't work when I use ng-bind-html to let the value to be evluated as html, you can find the code from Plunker

Could it be that the directive was applied before the evaluation of the expression?

zx81
  • 41,100
  • 9
  • 89
  • 105
Qinjin
  • 401
  • 4
  • 12
  • For something like this, you should probably use a class filter, rather than an element filter. Then you can do `
    Text
    `
     – Codeman Jul 31 '14 at 23:47

3 Answers3

3

In order to bind some html to an angular variable you have to use the $sce module to verify the content.

live sample: http://plnkr.co/edit/NBFsepObvv5IujigTosK?p=preview

.controller('myController', ['$scope', '$sce', function($scope, $sce) {
    $scope.testText = $sce.trustAsHtml("<bold>Peter</bold>");

}]);
Polochon
  • 2,199
  • 13
  • 13
1

You might have to change you controller to the followning 

.controller('myController', ['$scope', '$sce', function($scope, $sce) {
      $scope.testWorks = 'John';
      $scope.testText = $sce.trustAsHtml("<bold>Peter</bold>");
      $scope.testTable = [$sce.trustAsHtml('<bold>A</bold>'), $sce.trustAsHtml('<bold>B</bold>'), $sce.trustAsHtml('<bold>C</bold>')];
    }]);

and you html to:

<tr>
    <td ng:repeat="data in testTable" ng-bind-html="data"> </td> 
</tr>

here is an example

rishal
  • 3,230
  • 3
  • 22
  • 29
0

Thanks for both Polochon and rishal, I got it work with $sce.trustAsHtml($compile("<bold>A</bold>")($scope).html(). You can find it from here: Plunker

Qinjin
  • 401
  • 4
  • 12
  • hi, the compile create a 'jquery' node that give you access to the append and prepend functions. It's needed when you want add a directive to the DOM after the page loading. However if you use an angular variable you dont need to compile before adding. just use trustAsHtml. – Polochon Aug 01 '14 at 08:10