CODEWITHSUNDEEP
javascriptangularjsdirectiveng-bind-html
Qinjin
Qinjin

Reputation: 421

Angular directive for customized html tag in table

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?

Upvotes: 0

Views: 354

Answers (3)

Qinjin
Qinjin

Reputation: 421

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

Upvotes: 0

Polochon
Polochon

Reputation: 2219

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>");

}]);

Upvotes: 3

rishal
rishal

Reputation: 3538

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

Upvotes: 1

Related Questions