如何从角度ace编辑器获取修改后的文本

时间:2015-01-12 09:33:01

标签: javascript angularjs ace-editor

我使用带有指令的angular js Ace插件

<div ng-model="fileContent" ui-ace="aceOptions"></div>

我已将文件内容设置为范围上的fileContent变量。

我可以看到编辑器显示数据。但是我无法在编辑器中获取修改后的文件内容。 如何获取该fileContent模型的更改内容。

我也得到了。当我将实际值设置为模型时。

Error: [$rootScope:inprog] $digest already in progress
http://errors.angularjs.org/1.3.2/$rootScope/inprog?p0=%24digest
    at REGEX_STRING_REGEXP (http://127.0.0.1:8080/vendor/angular/angular.js:80:12)
    at beginPhase (http://127.0.0.1:8080/vendor/angular/angular.js:14553:15)
    at Scope.$get.Scope.$apply (http://127.0.0.1:8080/vendor/angular/angular.js:14297:11)
    at link.executeUserCallback (http://127.0.0.1:8080/vendor/angular/angular-ui-ace/ui-ace.js:199:19)
    at Array.link.listenerFactory.onChange (http://127.0.0.1:8080/vendor/angular/angular-ui-ace/ui-ace.js:237:15)
    at r._signal (http://127.0.0.1:8080/vendor/angular/ace-builds/src-min-noconflict/ace.js:1:48755)
    at onChange (http://127.0.0.1:8080/vendor/angular/ace-builds/src-min-noconflict/ace.js:1:149653)
    at r._signal (http://127.0.0.1:8080/vendor/angular/ace-builds/src-min-noconflict/ace.js:1:48755)
    at insertInLine (http://127.0.0.1:8080/vendor/angular/ace-builds/src-min-noconflict/ace.js:1:120507)
    at insert (http://127.0.0.1:8080/vendor/angular/ace-builds/src-min-noconflict/ace.js:1:119301)

1 个答案:

答案 0 :(得分:2)

onLoad和onChange函数作为ui-ace对象的一部分提供。这些函数返回一个编辑器对象。该编辑器对象有一个会话,其中包含用于收集所需信息的函数(.getSession().getValue())。

所以观点:

<div ui-ace="{onLoad:aceLoaded, onChange:aceChanged}" id="build-editor"></div>

控制器:

//Runs every time the value of the editor is changed
$scope.aceChanged = function(_editor){
  console.log('Ace editor changed');
  // Get Current Value
  var currentValue = _editor.getSession().getValue();
  // Set value
  //_editor.getSession().setValue('This text is now in the editor');
};

// Runs when editor loads
$scope.aceLoaded = function(_editor){
  console.log('Ace editor loaded successfully');
  var _session = _editor.getSession();
  _session.setUndoManager(new ace.UndoManager());
  // Editor Events
  // _session.on("change", function(){
  //   console.log('[EditorCtrl] Session changed:', _session);
  // });
};

如果您愿意,也可以使用我在aceLoaded()函数中注释掉的事件发射器而不是aceChanged()函数,但我个人喜欢单独的函数。有关此内容的更多信息,请参阅ui-ace readme

旁注:您可能希望向aceChanged()函数添加某种deboucer(可能是$ timeout),以便在进行大量更改时不会继续运行一切都在连续(连续打字)。