Directive Execution in Modal


#1

I’m using 1.0.0-beta.8 and am having issues with directives in a modal that don’t seem to be executing properly, or at all.

I have a page with content and a slide-box. When you click the slide-box, a modal is shown. Inside the modal is a slide-box and some content.

In my controller for the parent page, I have copied the code from the documentation for $ionicModal, only changing the template path. On the slide-box directive I have an ng-click=“modal.show()”. When clicked, the modal is shown the slide-box doesn’t work and there’s no padding on my content area. There are no errors reported in the console.

For the padding, I’m using an ion-content directive with padding=“true”. Ion-content seems to be working since I can scroll the page and see that it has added the extra divs. Inspecting the scope in Batarang shows that padding is set to true, but the “padding” class is not added. If I add a class=“padding” to the ion-content element, it does get applied properly. I can live with that, but it doesn’t seem right.

The slide-box is a bigger issue. When the modal loads, I can see that the pager dots have been added, but no images are displayed and the control is not responsive to input. I did find a workaround of sorts, but like padding above, it doesn’t seem right at all. Instead of calling $ionicModal.fromTemplateUrl() when the controller loads (like in the docs), I put the block of code plus a modal.show() inside a function that gets called from the ng-click. That at least made the slide-box start working, but it didn’t change my padding problem.

Does anyone have ideas for what is going on? My only guess is that it’s some sort of scope nesting issue that I’m not seeing.


#2

Can you provide a demo? It’s kind of hard to find out the issue with out seeing it.