javascript - 选择后 ionic 标签运行功能

Question

我有一个带有选项卡式界面的 ionic 应用程序，其中一个选项卡上有一个代码编辑器，另一个选项卡上有一个预览区域(使用用户代码)。我想完成两件事，但都遇到了同样的问题:

<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) 一旦选择了代码编辑选项卡，并且在选项卡的内容被注入(inject)到 DOM 之后，我想运行一个函数来激活我的代码编辑器。

• 如果我使用 on-selected 回调注册该函数，它将在 #codeEditor div 创建之前被调用。
• 如果我在选项卡内容区域(与#editor div 一起创建)内的脚本标记内调用函数，则脚本不会执行(请参阅 See this problem。
• 如果我在我的应用程序中包含 JQuery 以尝试让此类脚本自动执行，ionTabs Controller 就会中断。
• 如果我尝试在编辑器 div 上使用 onload 事件调用该函数，它不会被执行。

2) 选择预览选项卡时，同样的问题也适用。我想编译代码并将其注入(inject) Canvas 元素，但我无法在创建 Canvas 元素之前执行此操作。

那么，有谁知道如何在 ion-tab 的 ion-content 创建 DOM 后调用函数 ？

Answer 1

想通了。

问题#1:

正如我在问题中提到的，问题是 on-select 在创建 div 之前执行，并且常规回调(例如 onload ) 在由 Angular 元素注入(inject)的模板中不起作用。您可以通过使用相应的 Angular Directive(指令)来解​​决此问题。因此，您可以在编辑器 div 中使用 ng-load。

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

问题#2:

基本问题:

• 代码编辑器(包含处理代码)和目标 Canvas (我们要向其注入(inject)所述代码)永远不会同时存在。

解决方法:

• 取消选择代码选项卡时保存代码，并在加载 Canvas 时注入(inject)该存储的值。

完整解决方案

<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>