ng-bind-html with $sce not rendering html

Question

I'm getting a string with both text and html from my Api and I want it to render both. Currently only the text is rendered. Here is my view and controller:

Controller:

angular.module('app').controller('pakningInfohjelpModalController', pakningInfohjelpModalController); 

pakningInfohjelpModalController.$inject = ['$uibModalInstance', '$uibModal', 'content', '$sce' ]; 

function pakningInfohjelpModalController($uibModalInstance, $uibModall, content, $sce) {
    var ctrl = this; 

    ctrl.$onInit = () => {
        ctrl.title = content.modalTitle;
        content.modalBody = $sce.trustAsHtml(content.modalBody);
        if(content.modalBody == ''){
            ctrl.body = "Det finnes for øyeblikket ikke noen informasjon om dette feltet";
        }else{
            ctrl.body = content.modalBody.$$unwrapTrustedValue();
            console.log(ctrl.body);
        }
    }

    ctrl.lukk = () => {
        $uibModalInstance.close();
    }
}

View:

<div class="modal-body">
        <h4>Hjelp for {{$ctrl.title}}</h4>
        <div class="card-group">
                <div class="card-body">
                    <p><div ng-bind-html="$ctrl.body"></div></p>
                </div>
                <pre>
                    {{$ctrl.body}}
                </pre>
        </div>
    </div>
    <div class="modal-footer">
        <button class="btn btn-green pull-left" type="button" ng-click="$ctrl.lukk()">Lukk</button>
    </div>

The console log in the controller logs both the text and the html. I have looked at several similar issues, but the solutions do not apply to my problem.

Resources:

Why is ng-bind-html not displaying anything?

The documentation is no help either:

https://docs.angularjs.org/api/ng/directive/ngBindHtml

Here is the string I want to bind:

                Fyllingsgraden skal indikere hvor godt innholdet i emballasjen opptar av emballasjens totale volum, basert på registrert bredde, dybde og høyde som ytre volum. <p><embed src="***" autostart="false"  width="100%" /></p>

The source is removed but its there in my code

http://embed.plnkr.co/hno8NpqdCjaP2zzdacoU/ i pasted the string in this plunkr example. the html is not rendering. — Øystein Seel, Mar 06 '18 at 12:49
It would be good if your could make a [plnker](http://plnkr.co/edit/?p=preview) or a jsfiddle — lealceldeiro, Mar 06 '18 at 15:27
see the link i provided in the comment above. When i paste the string I want to bind, I only get the text and not the html. — Øystein Seel, Mar 07 '18 at 08:12

score 0 · Answer 1 · answered Mar 06 '18 at 12:41

0

Use ngSanitize, inject it to the module.

Change the html code as following.

<pre>
     <div ng-bind-html="$ctrl.body"></div>  
 </pre>

To know more about ngSanitize , check this

answered Mar 06 '18 at 12:41

PSK

17,547
5
32
43

It just shows the string and the html, nothing is rendered. – Øystein Seel Mar 06 '18 at 12:47
I have pasted the string in the demo of the link you provided. The html is still not rendered. – Øystein Seel Mar 06 '18 at 12:52

ng-bind-html with $sce not rendering html

1 Answers1