CODEWITHSUNDEEP
angularjsangular-uiace-editor
BadgerBadgerBadgerBadger
BadgerBadgerBadgerBadger

Reputation: 374

Failure to set Ace Editor used via the ui-ace directive into readOnly mode

The ui-ace library I'm using: https://github.com/angular-ui/ui-ace

The markup:

<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>

The controller code:

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

Note: The actual logic for setting the editor's state is conditional on a variable and not literally a boolean 'true'.

Any ideas what could be going wrong?

Upvotes: 0

Views: 1841

Answers (2)

Frozen Crayon
Frozen Crayon

Reputation: 5400

Use ng-readonly:

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

where checked is a scope variable.

Upvotes: 0

orbitbot
orbitbot

Reputation: 768

Making the editor readonly is exposed through a specific html template attribute. From the docs:

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

You can change the value of $scope.checked in your controller or then just toggle checked to something truthy elsewhere in your html template.

If you want to change the readonly status like you're trying to in the aceLoaded function, you need to call setOptions:

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

... but this also requires you to keep a reference to the editor around to change the status later on. A scope variable like in the first case is probably easiest, but of course it doesn't offer any other functionality like the latter would, if you actually need it.

Upvotes: 1

Related Questions