ng-bind-html与$ sce不呈现html

时间:2018-03-06 12:34:45

标签: javascript angularjs

我从Api获得了一个包含text和html的字符串,我希望它能同时渲染。目前只呈现文本。这是我的观点和控制器:

控制器:

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();
    }
}

查看:

<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>

控制器中的控制台日志记录文本和html。我已经看过几个类似的问题,但解决方案并不适用于我的问题。

资源:

Why is ng-bind-html not displaying anything?

文档也没有帮助:

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

这是我要绑定的字符串:

                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>

源已删除,但在我的代码中

1 个答案:

答案 0 :(得分:0)

使用ngSanitize,将其注入模块。

更改html代码如下。

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

要了解有关ngSanitize的更多信息,请查看this