无法使用 angular-ui-ace 嵌入 ACE 编辑器 "ui-ace need ace to work" 错误

Question

我正在尝试将 ACE editor elements 嵌入到我的 AngularJS 项目中，以便在其中允许 JSON 编辑功能。以下是目前所有 configurations/settings：

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": "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

通过在我的 header 中从 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 header include。

还需要为我的 ui-ace div 添加样式="height: 400px;" 以使其可见。

无法使用 angular-ui-ace 嵌入 ACE 编辑器 "ui-ace need ace to work" 错误

Can't embed ACE Editor "ui-ace need ace to work" error with angular-ui-ace

javascript

json

ace-editor

angularjs

angular-ui