複数のui-aceコードエディタでスクロールする問題

Question

ui-ace http://angular-ui.github.io/ui-ace/を使用し、複数のコードエディタを1つのWebページで使用しようとしています。コードeditor4まで

1. スクロールして、editor1をコーディングして選択することがeditor4
2. スクロールアップでいくつかのテキストを選択します。plunkerの例は、次の手順を実行して、スクロール問題を再現することができるはず、ここhttps://plnkr.co/GPictv3HdtGWW76fHw2l

   ですバックコードeditor4としたときに、コードeditor1

を表示するポップアップウィンドウの自動スクロールを選択するか、テキスト編集するコードeditor4でクリックするeditor1

スクロールでいくつかのテキスト210

エディタ1〜4を表示するメインコードはこちらです。どのようにして自動スクロールの動作を防ぐことができますか？ユーザーがコードエディタの1つをクリックしてテキストを編集または選択すると、ウィンドウは別のコードエディタにスクロールしてはなりません。 style.cssの高さを500pxではなく70pxに変更すると、最大化するとすべてのコードエディタがブラウザウィンドウ内に収まり、異なるコードエディタでコードを選択または編集するときに自動スクロールの問題は発生しません。ブラウザウィンドウの高さを縮小してコードエディタがウィンドウ内に収まらない場合、異なるコードエディタでコードを選択または編集しようとすると、スクロールの問題が再び発生します。それはUI-エースplunkerのデモが複数のコードエディタが使用されているこの奇妙なスクロール動作が発生ace.jsバージョンを使用していることが判明し、これはさらに研究した後

<section> 
<label>Editor1:</label> 
<div ui-ace="{ 
    useWrapMode : false, 
    showGutter: false, 
    theme:'monokai', 
    mode: 'javascript' 
}" ng-model="editor1">Ace 1 here</div> 
<br> 
<label>Editor2:</label> 
<div ui-ace="{ 
    useWrapMode : false, 
    showGutter: false, 
    theme:'monokai', 
    mode: 'javascript' 
}" ng-model="editor2">Ace 2 here</div> 
<br> 
<label>Editor3:</label> 
<div ui-ace="{ 
    useWrapMode : false, 
    showGutter: false, 
    theme:'monokai', 
    mode: 'javascript' 
}" ng-model="editor3">Ace 3 here</div> 
<br> 
<label>Editor4:</label> 
<div ui-ace="{ 
    useWrapMode : false, 
    showGutter: false, 
    theme:'monokai', 
    mode: 'javascript' 
}" ng-model="editor4">Ace 4 here</div> 
</section> 

Answer 1

。代わりにあなたのデモで<script src="https://rawgithub.com/ajaxorg/ace-builds/v1.1.1/src-min-noconflict/ace.js"></script>を使用してのあなたは、あなたがhttp://angular-ui.github.io/ui-ace/にページのソースを表示し、vendor/ace.jsをクリックした場合、彼らは彼らのに対し、http://angular-ui.github.io/ui-ace/vendor/ace.jsを使用していることを確認することができます<script src="https://rawgithub.com/ajaxorg/ace-builds/master/src-min/ace.js"></script>

を使用することができ、より良いここhttps://angular-ui.github.io/ui-ace/vendor/ace.jsをace.jsバージョンを使用するか、することができますplunkerデモはplunker作業https://rawgithub.com/ajaxorg/ace-builds/v1.1.1/src-min-noconflict/ace.js

<!-- Le javascript 
================================================== --> 
<script src="assets/vendor/prettify.js"></script> 
<script src="assets/vendor/angular.min.js"></script> 
<script src="assets/vendor/ui-bootstrap-tpls.min.js"></script> 
<script src="core/prettifyDirective.js"></script> 
<script src="core/plunker.js"></script> 
<script src="vendor/ace.js"></script> 
<script src="vendor/theme-twilight.js"></script> 
<script src="vendor/mode-markdown.js"></script> 
<script src="vendor/mode-scheme.js"></script> 
<script src="vendor/worker-javascript.js"></script> 
<script src="dist/ui-ace.min.js"></script> 

を使用し、ここでhttps://plnkr.co/E7Dl2btYJFWpms0mdVE0

です