离子选项卡在选择后运行功能

ion-tabs run function after selection

本文关键字：运行 功能 选择 选项      更新时间：2023-09-26

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

  • 如果我用on selected回调注册函数，它将在创建#codeEditordiv之前被调用
  • 如果我在选项卡内容区域（与#editordiv一起创建）的脚本标记中调用函数，那么脚本就不会执行（请参阅查看此问题
  • 如果我在应用程序中包含JQuery，试图让这样的脚本自动执行，那么ionTabs控制器就会中断
  • 如果我尝试在编辑器div上使用onload事件来调用该函数，它不会被执行

2） 选择预览选项卡时也会出现同样的问题。我想编译代码并将其注入到canvas元素中，但在创建canvas元素之前无法完成此操作。

那么，有人知道在创建了ion-tab的ion-content中的DOM之后如何调用函数吗？

想明白了。

问题#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>
相关文章：