Editor Ace inattivo nell'app Ionic

Question

Sto lavorando a un'app che utilizza lo Ionic Framework e vorrei includere un componente editor di assi in uno <ion-view>.

Problema:

Quando clicco all'interno dell'editor l'asso posso vederlo selezionare la linea, ma il cursore non viene visualizzato.

Si può vedere la questione in this codepen (non esiste il mio problema, ma lo stesso codepen)

Il problema che sto avendo sembra essere che l'editor asso mantiene perdere attenzione, ma io non riesco a capire cosa potrebbe essere rubare l'attenzione. Penso che questo sia il problema perché nel pannello degli elementi in chrome posso vedere che la classe seguente è assegnata al div.

ace_layer ace_cursor-layer ace_hidden-cursors

È interessante notare che, se tengo premuto il mouse fare clic su un po 'di più si guadagnerà messa a fuoco e il cursore verrà visualizzato. I brevi clic del mouse non funzionano.

mio template HTML per l'editor:

<ion-view view-title="Editor"> 
    <ion-content> 
    <div> 
     <pre id="ace-editor">this is a test</pre> 
    </div> 
    </ion-content> 
</ion-view> 

E il mio angolare controller in cui ho impostato il ace editor:

.controller('EditorCtrl', function ($scope, $stateParams) { 
    var init = function() { 
    editor = ace.edit('ace-editor'); 
    editor.setTheme('ace/theme/monokai'); 
    editor.setOption("dragEnabled", false); 
    editor.removeAllListeners("mousedown"); 
    editor.getSession().setMode("ace/mode/javascript");  
    }; 

    init(); 
}); 

Ho provato a rimuovere tutti i mousedown eventi sull'editor asso vedere se era correlato, ma non è stato risolto.

Ho anche provato a rimuovere lo sidemenudrag dal menu laterale ionico, ma questo non è stato risolto.

Answer 1

Usa data-tap-disabled="true" come questo:

<pre id="ace-editor" data-tap-disabled="true">this is a test</pre>

ho trovato qui: http://www.ionicframework.com/docs/api/page/tap/