Ion-slide-box or other Ionic elements not working with ngBindHtml

At runtime I have a html code string with the ion-slide-box in it. I want to bind it with ngBindHtml to a div dom element. The slide box does not work and appears broken with no functional js.



$scope.scopeData.content = htmlContent;

… ion-slide-box in the htmlContent will not work and appears broken.

If I $compile the html code string and append it to a div box then it works, but it will not be shown everytime :frowning: Many times the content appears and sometimes the whole view keeps empty.

I tried to let the $compile method time for 10 seconds with $timeout and THEN append the compiled result to a div box. Same problem here.



var compiledHtmlContent = $compile(htmlContent)($scope)[0];

$timeout(function() {
}, 10000);

… shows up many times but not everytime.

But why and how to solve this?

Hmm … this directive seems to work.

<div html-content="scopeData.content"></div>

Controller like above …

Directive in app.js, directly after the .module call:

angular.module(...).directive('htmlContent', function (
) {
  return {
    restrict: 'A',
    replace: true,
    link: function (scope, ele, attrs) {
      scope.$watch(attrs.htmlContent, function(html) {

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

Any clues? Anyone?