Sometimes compiled content not showing

Hi there,

sometimes my compiled html content is not showing, but only sometimes. Most of the times everything works like a charm. The variable html contains random html content everytime. The variable compiledHtml contains a compiled dom node everytime. But sometimes the view won’t show the compiledHtmlContent.

Why? And how to confirm that the node will be shown? Is somewhere an update method for the view?

here the view:

here the controller:

var compiledHtml = $compile(html)($scope)[0];
document.getElementById(‘html-container’)).appendChild(compiledHtml);

Boohooo! Why it does not work everytime? Why it shows a blank content view sometimes? This makes me unhappy :frowning:

And no, there’s no option to use ng-bind-html attribute, because the html content contains ionic directives like “ion-slide-box” that must be $compiled, else they won’t run.

On iOS this fault appears more often than on Android. My versions:
Ionic 1.7.14
Cordova 6.1.1
Bower 1.7.9
npm 2.11.3

I’m still struggling with this issue … should I upgrade the framework?

why do you are compiling it on your own?
there is an ngBindHtml directive?

Do not make dom manipulations in a controller!
It only works sometime because you can not be sure, that the dom-note is already rendered while your code gets executed.

if you need to compile it on your own --> add a custom directive to the html-container dom node --> there you can define a “link”-function, which is executed after the dom node is rendered and connected.

Hi @bengtler,
I need to compile it, else directives in the html content are not working. the html content contains Ionic elements like ion-slide-box. They only work if I compile the content. NgBindHtml attribute will not work as I wrote above. It shows the html content, yes, but ion-slide-box (or other Ionic elements) in the html content are NOT working.

Could you give me an code example please? I’m not sure what you mean.

But … I think I tried something similar you telling me. I tried this:

var compiledHtml = $compile(html)($scope)[0];
$timeout(function() {
document.getElementById(‘html-container’)).appendChild(compiledHtml);
}, 5000);

So the controller has 5 seconds time for compiling the (relative short) html content and then it will be appended to the existing “html-content” dom element on the view as a child element. But still it sometimes keeps to be not visible.

Or … do you think there is a way to get ion-slide-box working in usage with the ngBindHtml attribute?

I confirmed it myself again: With ngBindHtml I cannot use Ionic elements like ion-slide-box or other js elements in the binded html content, but if I precompile the html content with $compile and append the compiled dom to another dom, everything works sometimes and sometimes not. Even if I let the controller time to compile and append the resulting dom later! WHY? … @bengtler Your directive will not help … right?

Or am I wrong? I wish I could use ngBindHtml at this point, because it seems that this attribute works everytime but without compiling the html content. Is there any way to use ngBindHtml AND compilation in any topic?

Perhaps I should ask it simpler: If I have html content with the ion-slide-box used in it at runtime, how do I insert/append it to the view?

Okay, I think that’s a solution:

https://forum.ionicframework.com/t/ion-slide-box-or-other-ionic-elements-not-working-with-ngbindhtml/63925/2?u=happyhappyjoyjoy

OH NO NO NO NO!

Sometimes the content STILL disappears/won’t be shown.

Any clues? Anyone?

@bengtler The directive idea creates the same result. Sometimes disappearing content that won’t be shown.

I continue the topic here:
https://forum.ionicframework.com/t/ion-slide-box-or-other-ionic-elements-not-working-with-ngbindhtml/63925/2?u=happyhappyjoyjoy