如何使用angular-ui-ace在编辑器中添加自动完成选项

时间:2015-09-23 15:32:12

标签: angularjs web ace-editor

我正在使用aungular-ui-ace在我的网站上创建代码编辑器。一切都很好,但我想要包括自动完成选项。选项{enableBasicAutocompletion:true}对我不起作用。

我的代码:



var app = angular.module('MyApp', ['ui.ace']);

app.controller('MyCtrl', function($scope){});

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

<body ng-app="MyApp" ng-controller="MyCtrl">
  <div ui-ace="{mode: 'javascript', enableBasicAutocompletion: true}"></div>
</body>  
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

请参阅自述文件https://github.com/angular-ui/ui-ace#advanced-options

的高级选项部分

var app = angular.module('MyApp', ['ui.ace']);

app.controller('MyCtrl', function($scope){});
<head>
   <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>-->
   <script src="http://angular-ui.github.io/ui-ace/assets/vendor/angular.min.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ace.js"></script>
   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.0/ext-language_tools.js"></script>
   <script type="text/javascript" src="http://angular-ui.github.io/ui-ace/dist/ui-ace.js"></script>
</head>  

<style>
.ace_editor  {
  height : 200px;
}
</style>

<body ng-app="MyApp" ng-controller="MyCtrl">
  <div ui-ace="{mode: 'javascript', 
   require: ['ace/ext/language_tools'],
   advanced: {
      enableSnippets: true,
      enableBasicAutocompletion: true,
      enableLiveAutocompletion: true
  }}"></div>
</body>