1

In this answer, I'm trying to follow, it's suggested to implement a function in my JS like this. As shown, I've tried both with the further call to trustAsHtml(...) and a hard coded string. Same result in both cases.

$scope.renderHtml = function (htmlCode) {
  return "whatever";
  // return $sce.trustAsHtml(htmlCode);
};

I also implemented the markup as follows. Only the first line shows (plain mustaches) while the others render nothing visible. I've tried with hard coded value as well as the variable with/sans the mustache.

<td ng-if="certificate.details">
  {{certificate.details}}
  <!--<div ng-bind-html="$scope.renderHtml(34343)"></div>-->
  <!--<div ng-bind-html="$scope.renderHtml(certificate.details)"></div>-->
  <!--<div ng-bind-html="$scope.renderHtml({{certificate.details}})"></div>-->
</td>

I'm not sure how to bite this one and all the resources point to the same Angular directive - ng-bind-html. What am I doing wrong? How can I troubleshoot it further?

Bottom line, I'm trying to render a string in my object as HTML for styling. Can I do that in a totally different (and easier) way to begin with, perhaps? (Still would like an answer to this question, should there be such an easier approach.)

Community
  • 1
  • 1
  • use `ng-show` instead of `ng-if` – Karthik VU Mar 10 '17 at 16:15
  • In your ng-bind-html calls, don't use $scope. prefix... Just: ng-bind-html="renderHtml(34343)" . See if that sorts it out. And you don't need to use a function for returning it either. Just bind directly to the scope variable the html is in. ng-bind-html="certificate.details" assuming certificate is attached to scope. – Brant Mar 10 '17 at 16:15
  • @KarthikVU Is that comment FYI in general or does it relate to the actual issue I'm having? –  Mar 10 '17 at 16:27
  • Did you try [this](http://stackoverflow.com/a/18342738/3283641)? – amansinghgusain Mar 10 '17 at 16:30
  • @Brant Sorry, none of that worked out. But it's good to know that I can skip the function call. It simplifies the number of things to test. More suggestions? –  Mar 10 '17 at 16:31
  • @amansinghgusain Post that as an answer or as a dupe. That made the trick. Thanks! –  Mar 10 '17 at 16:36
  • An easier approach would to just use a directive! – DDelgro Mar 10 '17 at 16:41
  • @DDelgro Not sure how to due to lack of knowledge of AngularJs. Care to throw in a few keywords, link or two? –  Mar 10 '17 at 16:43
  • https://www.sitepoint.com/practical-guide-angularjs-directives/ I used this site when I wanted to learn directives. As you go you can make them even more complex and you can always use a template for your html instead of throwing it right into the directive. Great stuff! @Andy J – DDelgro Mar 10 '17 at 16:43
  • @DDelgro I have used directives for long now but couldn't found a way to cast a plain string to html element, can you make a plunk for similar problem?, this could be helpful for many of us thanks – amansinghgusain Mar 10 '17 at 16:55
  • what do you mean "cast a plain string to html"? @amansinghgusain – DDelgro Mar 10 '17 at 17:24

0 Answers0