Ng-bind-html rendering ionic tags as plain text (update)

ionic-v1
1

Hi,

I have some HTML in a JSON object which my controller assigns to $scope.calendarObj

In my template I have

<div ng-bind-html="calendarObj.itemtext"></div>

If my calendarObj.itemtext contains the following it renders correctly as a list heading

<div class="list">
	<div class="item item-divider"> 
	test
	</div>
</div>

But when I use the alternative tags it renders as plain text

<ion-list>
	<ion-item class="item-divider item-text-wrap"> 
	test
	</ion-item>
</ion-list>

Update

I’m thinking [Angular Strict Contextual Escaping (SCE)][1] may be the issue

Changing my controller to use

scope.calendarHTML=$sce.trustAsJs(calendar[64].itemtext);

is now binding the correct HTML/Ionic tags (as seen using Inspect) but it is still not rendering correctly, like the CSS is being ignored, or the Javascript ‘magic’ of the Ionic tag is being ignored.
[1]: https://docs.angularjs.org/api/ng/service/$sce

2

if you want that your javascript logic works, you need to actually compile the div.
just read https://docs.angularjs.org/api/ng/service/$compile

3

Thank you so much, works perfectly!

4

hi, same issue but when i use the compile directive ( ref : https://docs.angularjs.org/api/ng/service/$compile)
its override the reaming div tag and only show compile div.can any help me

5

using directive

.directive(‘compile’, [’$compile’, function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the ‘compile’ expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the ‘compile’ expression changes
// assign it into the current DOM
element.html(value);

                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            }
        );
    };
    }])

html page

where logo is
$scope.logo=response.tag;