Ace Editor verliert Fokus in der ionischen App

Question

Ich arbeite an einer App mit dem Ionic Framework und möchte eine Ace-Editor-Komponente in eine <ion-view> einfügen.

Ausgabe:

Als ich in der das Ass-Editor klicken kann ich sehen es die Zeile auswählen, aber der Cursor nicht angezeigt.

Sie das Problem in this codepen sehen kann (nicht meine codepen aber gleiches Problem existiert)

Das Problem, das ich erscheint Fokus zu verlieren sein habe, dass das Ass Editor hält aber ich kann nicht scheinen, um herauszufinden, was könnte den Fokus stehlen. Ich denke, das ist das Problem, weil ich im Elementpanel in Chrome sehen kann, dass die folgende Klasse dem Div zugewiesen ist.

ace_layer ace_cursor-layer ace_hidden-cursors

Interessanterweise Wenn ich die Maus gedrückt halten, klicken Sie auf ein wenig länger es Fokus gewinnen wird und der Cursor wird angezeigt. Kurze Mausklicks funktionieren nicht.

Meine HTML-Template für die Redaktion:

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

Und meine Winkel controller, wo ich die ace editor gesetzt: zu sehen, ob es

.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(); 
}); 

Ich habe versucht, die Beseitigung aller mousedown Ereignisse auf dem ace-Editor war das verwandt, aber es hat nicht behoben.

Ich habe auch versucht, die sidemenudrag aus der ionischen Seite Menü entfernen, aber das hat auch nicht behoben.

Answer 1

Verwenden data-tap-disabled="true" wie folgt aus:

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

fand ich es hier: http://www.ionicframework.com/docs/api/page/tap/