無法使用angular-ui-ace嵌入ACE編輯器“ ui-ace需要ace才能工作”錯誤

Question

我試圖將ACE編輯器元素嵌入到我的AngularJS項目中，以允許其中包含JSON編輯功能。 到目前為止，這里是所有配置/設置：

Bower.json

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

模塊依賴

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

控制器中的ACE設置

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

HTML

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

但是我總是出現以下錯誤：

“ message”：“錯誤：ui-ace需要ace才能工作...（好嗎？）”，

我做錯了還是錯過了什么？

Answer 1

用Bower提取腳本后，請確保將其包含在應用程序中。 以下是Ace UI文檔中提供的腳本的順序。

<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-ace正常工作：

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

我使用require包含npm模塊，但是通過require包含ace時遇到了一些麻煩，因此我只是將其手動添加為HTML標頭包含。

還必須添加一個style =“ height：400px;”。 到我的ui-ace div使其可見。