UI-Ace 自动完成与角度

Question

我已经添加了ui-ace编辑器，一切正常。现在我正在尝试添加自动完成：我添加了ext-language_tools.js文件，但它显示错误：

"未捕获的引用错误：未定义 ace。（匿名功能） 分language_tools"

我的 html 页面如下所示：

<div ui-ace="{ onLoad : aceLoaded, mode: 'gherkin', theme: 'chrome', require: ['ace/ext/language_tools']}" ng-model='scenario.StepsLine' join-steps-array style="height : 200px"></div>

和 ACE 加载功能：

$scope.aceLoaded = function(_editor){
    // Editor part
    var _session = _editor.getSession();
    var _renderer = _editor.renderer;
    _editor.setOptions({
        minLines: 10,
        maxLines: 40,
        wrap: true,
        firstLineNumber: 1,
        enableBasicAutocompletion: true,
        enableSnippets: true,
        enableLiveAutocompletion: true
    })
};.

同样在控制台中，我有关于

拼写错误的选项"启用片段" 拼写错误的选项"启用实时自动完成"

但我想这是未连接的 ext-language_tools 的结果。

Angular 成功找到所有需要的文件：

<script src="/Content/app/common/ace/ext-language_tools.js"></script>
<script src="/Content/app/common/ace/ace.js"></script>
<script src="/Content/app/common/ace/mode-gherkin.js"></script>
<script src="/Content/app/common/ace/theme-chrome.js"></script>
<script src="/Content/app/common/ace/theme-twilight.js"></script>
<script src="/Content/app/common/ace/ui-ace.js"></script>
<script src="/Content/app/common/ace/snippets/gherkin.js"></script>

Answer 1

需要在

ace.js 之后添加 ext-language_tools.js，否则它会在尝试访问 ace 全局变量时引发错误。
模式和主题脚本可以跳过，因为 ace 会自动添加它们。

Answer 2

除了包含angular-ui-ace/ui-ace.js （UI Ace File）

您是否包含以下文件？

• ace-builds/src-noconflict/ace.js

• ace-builds/src-noconflict/ext-language_tools.js