AngerJSプロジェクトにACEエディタを組み込むことはできません。

Question

ACE editor elementsをAngularJSプロジェクトに埋め込み、JSON編集機能を有効にしようとしています。コントローラ

$scope.ace_options = { 
    useWrapMode : false, 
    showGutter: true, 
    mode: 'json', 
    onLoad: function() { 
    console.log('onLoad fired.'); 
    }, 
    onChange: function() { 
    console.log('onChange fired.'); 
    } 
}; 

0123で

Bower.json

"dependencies": { 
    "angular-ui-ace": "v0.2.3" 
} 

モジュールの依存関係

angular.module('myApp', ['ui.ace']); 

ACEの設定：ここでは、すべての構成/設定これまでは、

Htmlの

<div id="editor" ui-ace="ace_options" ng-model="myJson" style="height: 400px"></div> 

私は常にエラーを以下の取得しかし：私は間違って

"message": "Error: ui-ace need ace to work... (o rly?)",

何をやっているか、私が何かを逃したのですか？

Answer 1

Bowerを使用してスクリプトをフェッチした後、アプリケーションにスクリプトを含めるようにしてください。以下は、Ace UI docsで提供されるスクリプトの順序です。

<script type="text/javascript" src="bower_components/ace-builds/src-min-noconflict/ace.js"></script> 
<script type="text/javascript" src="bower_components/angular/angular.js"></script> 
<script type="text/javascript" src="bower_components/angular-ui-ace/ui-ace.js"></script> 

Answer 2

私は私のヘッダーにCDNからace.jsを追加することにより、作業UI-エースを得ることができた：私が使用

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.6/ace.js"></script>

NPMモジュールを含める必要がなく、少し問題を含めていました私はちょうどそれをHTMLヘッダとして手動で追加しました。

また、style = "height：400px;"を追加する必要がありました。私のui-ace divに表示させる。