Question

我有一个带有标签界面的离子应用程序，它在一个标签上有一个代码编辑器，在另一个标签上有一个预览区域（使用用户的代码）。我想要完成两件事，这两件事都会遇到同样的问题：

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

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

2）选择预览选项卡时也会出现同样的问题。我想编译并将代码注入canvas元素，但是在创建canvas元素之前我不能这样做。

那么，是否有人知道如何在ion-tab ion-content内创建之后调用函数？

Answer 1

想出来。

问题＃1：

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

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

问题＃2：

基本问题：

代码编辑器（包含处理代码）和目标画布（我们要向其注入所述代码）将永远不会同时存在。

解决方案：

取消选择代码选项卡时保存代码，并在加载画布时注入该存储的值。

完整解决方案

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

选择后，ion-tabs运行功能

1 个答案: