Directive not being rendered withing SlideBox

1

Hi!

I’m using the AngularRoundProgressDirective. When I implement it on a regular Content View, it works fine.
But when I try to let it show up within a slide box, the canvas is not being rendered.

I put up my www folder for download: https://www.dropbox.com/s/nwmhgrqnkxkewak/www.zip

The directive is being calld in templates/tab-account.html Line 10-12:

 <div id="canvaswrapper" class="wrapper" ng-controller="AngRoundProgressCtrl"><div ang:round:progress data-round-progress-model="roundProgressData" data-round-progress-label-color="#000000" ng-click="toggle()"></div><br>
              <p id="countlabel">{{hours}}<span class="cntseparator">h </span>{{minutes}}<span class="cntseparator">m </span>{{counter}}<span class="cntseparator">s</span></p>
          </div>

When you move that code to a regular content view like in tab-friends.html the directive works fine.

Any suggestions? I’m trying to solve this for like 3 hours now, but I have no clue why it’s not working…

Thanks a lot!!

2

Now I know, why it is not being rendered.
The canvas can not be found by ID.

I tried it with a test div within a slidebox

<div id="test"></div>

And a console.log in my controller:

var test = documentGetElementByID('test'); console.log(test);

And the result is Null.

Do I have to add objects manually to the DOM if they are within a slidebox? And if so, how do I do that properly?

3

found that out as well. I have to wait till the page is loaded correctly

 $scope.$on('$viewContentLoaded', function() {}....

but the problem remains the same, within the slidebox - the progressbar is not being rendered… :frowning: