ion-tabs run function after selection

Question

I have a ionic app with a tabbed interface that has a code-editor on one tab and a preview area on another tab (that uses the user's code). There are two things I want to accomplish, both which run into the same problem:

<ion-tabs>
    <ion-tab title="Code" on-select="ace.edit('editor')">
         <ion-content>
             <div id="editor"></div>
         <ion-content>
    </ion-tab>
    <ion-tab title="Preview" on-select="compileAndPreviewCode()">
         <ion-content>
             <canvas id="previewCanvas"></canvas>
         <ion-content>
    </ion-tab>
</ion-tabs>

1) Once the code-edit tab is selected, and AFTER the contents of the tab have been injected to the DOM, I want to run a function that will activate my code editor.

• If I register the function with the on-selected callback, it will get called before the #codeEditor div has been created.
• If I call the function inside a script tag inside the tab content area (that gets created alongside the #editor div) then the script doesn't get executed (see See this problem.
• If I include JQuery in my application in an attempt to get such scripts to auto-execute, the ionTabs controller breaks.
• If I try to call the function using a onload event on the editor div, it isn't executed.

2) The same problem applies when the preview tab is selected. I want to compile and inject the code onto the canvas element, but I cannot do this before the canvas element is created.

So, does anyone know how I could call a function after the DOM within an ion-tab's ion-content is created?

Answer 1

Figured it out.

Problem #1:

The problem, as I mentioned in the question, is that on-select is executed before the div is created and that regular callbacks (such as onload) won't work in templates that are injected by angular elements. You can fix this by used a corresponding angular directive. So, you can use ng-load in the editor div.

<!-- Note: callAceEdit() needs to be attached to $scope -->
<div id="editor" ng-load="callAceEdit()"></div>

Problem #2:

Essential problem:

• The code editor (which contains the processing code) and the target canvas (to which we want to inject said code) will never exist at the same time.

Solution:

• Save the code when the code tab is deselected and inject that stored value when the canvas is loaded.

Full Solution

<ion-tabs>
    <ion-tab title="Code" on-deselect="saveCode()">
         <ion-content>
             <div id="editor" ng-load="callAceEdit()></div>
         <ion-content>
    </ion-tab>
    <ion-tab title="Preview">
         <ion-content>
             <canvas id="previewCanvas" ng-load="injectSavedCode()"></canvas>
         <ion-content>
    </ion-tab>
</ion-tabs>