Question

我正在使用的ui-ace库：https://github.com/angular-ui/ui-ace

标记：

<div class="ace-directive" 
     ng-model="template.value" 
     style="width: 100%; font-size:15px;" 
     ui-ace="{
      useWrapMode : true,
      showGutter: true,
      mode: ace.theme,
      onLoad : ace.loaded,
      onChange: ace.changed
     }">
</div>

控制器代码：

$scope.ace.loaded = aceLoaded;
function aceLoaded(editor){
        editor.setReadOnly(true);
    }

注意：设置编辑器状态的实际逻辑是以变量为条件而不是字面上的布尔值'true'。

任何可能出错的想法？

Answer 1

通过特定的html模板属性公开编辑器readonly。来自文档：

<div ui-ace readonly="{{checked}}"></div>

您可以更改控制器中$scope.checked的值，或者只需将checked切换为html模板中其他地方的真实内容。

如果您想更改您在aceLoaded功能中尝试的只读状态，则需要调用setOptions：

function aceLoaded(editor){
  editor.setOptions({
    readOnly: true
  });
}

...但这也要求您保留对编辑器的引用，以便稍后更改状态。像第一种情况一样的范围变量可能是最容易的，但当然它并不提供像后者那样的任何其他功能，如果你真的需要它。

Answer 2

使用ng-readonly：

<div ui-ace 
    ng-readonly="checked">
</div>

其中checked是范围变量。

未能通过ui-ace指令将Ace Editor设置为readOnly模式

2 个答案: