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


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

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

	<ion-item class="item-divider item-text-wrap"> 


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

Changing my controller to use


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.

if you want that your javascript logic works, you need to actually compile the div.
just read$compile

Thank you so much, works perfectly!

hi, same issue but when i use the compile directive ( ref :$compile)
its override the reaming div tag and only show compile div.can any help me

using directive

.directive(‘compile’, [’$compile’, function ($compile) {
return function(scope, element, attrs) {
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

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

html page

where logo is