无法将通过 ui-ace 指令使用的 Ace 编辑器设置为只读模式

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 模板属性公开的。从文档中：

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

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

如果你想像在

aceLoaded函数中尝试的那样更改只读状态，你需要调用 setOptions：

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

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

Answer 2

使用 ng-readonly：

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

其中checked是作用域变量。