UI-Ace 自动完成 angular

Question

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

"Uncaught ReferenceError: ace is not defined. (anonymous function) ext-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>

和王牌加载功能：

$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
    })
};.

同样在控制台中我有关于

的警告

misspelled option "enableSnippets" misspelled option "enableLiveAutocompletion"

但我猜这是未连接的结果 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

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

您是否添加了以下文件？

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

Answer 2

ext-language_tools.js需要在ace.js后面加上，否则访问ace全局变量会报错
模式和主题脚本可以跳过，因为 ace 会自动添加它们。

UI-Ace 自动完成 angular

UI-Ace autocomplete with angular

ace-editor

angularjs