Form elements?

[davisford]

Does Ace work with other elements besides <div>? I've got something like this:

<div ui-ace style="height: 200px;"></div>

...which shows the ace editor in the div, as expected. But if I just change it to this:

<textarea ui-ace class="form-control" style="height: 200px;"></textarea>

I can't even load the page -- Chromium tab will just hang, and eventually crash.

EDIT: sorry, I copied the sample code in incorrectly -- fixed now.

[slopjong]

Briefly, the browser will see the following structure when the directive is compiled and linked:

<textarea>
  <textarea>
  <textarea>
  <div>
  </div>
</textarea>

Is there a reason why you want to use the directive on a textarea?

[andrewboni]

Thanks- this helped resolve an issue for me. I was also trying to use ui-ace on a textarea and it was hanging/crashing the page as well.

[davisford]

@slopjong I had copied the sample code incorrectly in the issue I filed. I just wanted to know if ui-ace directive should work with a <textarea> or if that is not currently supported? I'm assuming that it is not supported, b/c I'm guessing you have an angular template in the directive that adds child elements to the parent, which won't work in <textarea> -- in which case, feel free to close out the issue.

[slopjong]

@andrewboni @davisford this doesn't come from ui-ace. That's how the ace editor works, the ui-ace directive only updates ace's session on model changes. The rendering is done by ace itself.

session.setValue(ngModel.$viewValue);

On this page I use the following structure.

<form ng-controller="EndpointIndexController" >
<textarea></textarea>
<je-splitter>
  <je-container>
    <je-ace/>
  </je-container>
</je-splitter>
</form>

In the form I use a textarea and the nested je-ace directive which wraps ui-ace. The form is then bound to the EndpointIndexController. In my case I render the initial content for the textarea server-side but to get ace's content back I've defined the aceChanged handler which is attached to ui-ace via the onLoad option:

$scope.aceChanged = function($e) {
      $scope.json = $e[1].session.getValue();
      var textarea = angular.element($element.find('textarea')[0]);
      textarea.text($scope.json);
    };

[offtopic]
je-ace is part of the yet very buggy angular json editor. If you're interested to contribute, let me know.
[/offtopic]

[davisford]

@slopjong thanks for the clarification. i've never used ace before, so am not familiar with how it works. re: angular json editor -- looks like neat implementation; i wonder if i wouldn't rather just type json in to save time, though?

[slopjong]

@davisford the angular json editor has schema support, it's more than just writing bare json. If you specify a schema file and disable the text editor people can compose a json with the tree editor by adding the fields in a certain level that are supposed to be added on that one. The example you saw has a default schema loaded but e.g. on the spaceapi page this schema will be loaded in the future so that endpoint maintainers are much faster in adding new fields while a certain quality is guaranteed. Wrong endpoint implementations lead to bug reports which are none.

[davisford]

Cool -- I have an immediate need for json schemas, but on the server side; I'm using Apache Avro -- have you looked at Avro? It works quite well, language independent, and has binary compression support -- but probably not much use in an Angular environment. I want to take a look at the angular json editor, it may prove useful in some capacity on a project I'm working on, and perhaps I can send some PRs.

[slopjong]

@davisford I opened a new issue where we can continue the discussion about the angular json editor.