CODEWITHSUNDEEP
angularjsangularjs-scopeangularjs-ng-repeat
Bri
Bri

Reputation: 593

Append ng-click to dynamically changed html

I have a ng-repeat for descriptions that have tags. I use init to filter the tags to rewrite the description with ng-click. However the ng-click doesn't work after. Is this possible?

<div ng-repeat="desc in descs">
   <div ng-init="desc.description = getTags(desc.description )">
      {{ desc.description }}
   </div>
</div> 

<script>
$scope.getTags = function(desc) {
   var desc = desc.replace("#tag", '<span ng-click="function">#tag</span>');
   return desc;
}
</script>

Thanks

Upvotes: 0

Views: 186

Answers (2)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

You need to use ng-bind-html but you also need to create one filter that will sanitize that html using $sce service trustAsHtml method.

Markup

<div ng-repeat="desc in descs">
   <div ng-bind-html="getTags(desc.description) | trustHtml">
   </div>
</div>

Filter

app.filter('trustHtml', function($sce) { 
  return function(text) {
    $sce.trustAsHtml(text);
  };
}

Upvotes: 1

aorfevre
aorfevre

Reputation: 5064

Injected HTML code into AngularJS shall be processed with $compile

See official doc here : https://docs.angularjs.org/api/ng/service/$compile

Upvotes: 1

Related Questions