Giter Club home page Giter Club logo

Comments (12)

mrosales avatar mrosales commented on August 24, 2024

+1

from ui-ace.

charandas avatar charandas commented on August 24, 2024

Seems to work for me fine. You need to tap into the onLoad callback, like so,

<div ui-ace="{ onLoad : vm.aceLoaded, mode: vm.script.type }"></div>
this.aceLoaded = (editor) => {
  editor.insert(script.body)
}

from ui-ace.

pmacmillan avatar pmacmillan commented on August 24, 2024

Here is a plunker that reproduces the issue

http://plnkr.co/edit/wZ2uuUGhYfEltWsQGN6R?p=preview

Notice that when you type into the editor, the model is updated and is reflected in the pre tag.

However, when you click the button, the editor is updated but the model is not. The model will not be updated again until you type into the editor.

var app = angular.module('x', ['ui.ace']);

app.controller('FooCtrl', function () {
  var editor;

  this.message = "";

  this.onAceLoaded = function (acee) {
    editor = acee;
  };

  this.doInsert = function () {
    if (!editor) return;
    editor.insert('Hello');
  };
})
<section ng-controller="FooCtrl as foo">
  <div ui-ace="{ onLoad: foo.onAceLoaded }" ng-model="foo.message"></div>

  <button ng-click="foo.doInsert()">Click Me</button>
  <hr>
  <pre>{{ foo.message }}</pre>
  <hr>
</section>

from ui-ace.

pmacmillan avatar pmacmillan commented on August 24, 2024

I've created a workaround here: http://plnkr.co/edit/7Mo7BE3vEIdOvh41Jqfe?p=preview

app.directive('fixAceInsert', function ($parse) {
  return {
    restrict: 'A',
    require: ['ngModel', 'fixAceInsert'],
    link: function (scope, el, attrs, ctrls) {
      var ngModel = ctrls[0];
      var fixAceInsert = ctrls[1];

      fixAceInsert.cb = $parse(attrs.fixAceInsert)(scope);
      fixAceInsert.ngModel = ngModel;

      if (fixAceInsert.cb && fixAceInsert.editor) {
        fixAceInsert.cb(fixAceInsert.editor);
      }
    },
    controllerAs: 'uiAceInsertFix',
    controller: function () {
      var self = this;

      this.onAceLoaded = function (editor) {
        self.editor = editor;

        if (self.cb) {
          cb(editor);
        }

        editor.on('change', function (event) {
          if (!self.ngModel) {
            return;
          }

          if (event.data.action !== 'insertText') {
            return;
          }

          self.ngModel.$setViewValue(editor.getValue());
        });
      };
    }
  };
});
<section ng-controller="FooCtrl as foo">
  <div ui-ace="{ onLoad: uiAceInsertFix.onAceLoaded }"
       ng-model="foo.message"
       fix-ace-insert="foo.onAceLoaded"></div>

  <button ng-click="foo.doInsert()">Click Me</button>

  <hr>
  <pre>{{ foo.message }}</pre>
  <hr>

</section>

from ui-ace.

wilg avatar wilg commented on August 24, 2024

I'm having this issue as well.

from ui-ace.

akuznetsov-gridgain avatar akuznetsov-gridgain commented on August 24, 2024

+1 We also have this issue. Please fix this.

from ui-ace.

CITguy avatar CITguy commented on August 24, 2024

I've submitted a patch for this in #124

from ui-ace.

iJungleboy avatar iJungleboy commented on August 24, 2024

Also had the issue (created and now closed a duplicate item). Also same as #133, but he seems to have a (unpushed) solution.

from ui-ace.

kwieckowski-neducatio avatar kwieckowski-neducatio commented on August 24, 2024

+1
Any update on this issue? It's 18 months old :(

from ui-ace.

JoshBargar avatar JoshBargar commented on August 24, 2024

+1 Any update on this?

from ui-ace.

santoshshinde2012 avatar santoshshinde2012 commented on August 24, 2024

I have used following code for me,

       $scope.aceOptions = {};

       //Ace Editor instance on change
        $scope.aceOptions.onChange = function(_editor){
           //on change get current value
           $scope.content = $scope.aceEditor._session.getValue();
        };

        //Ace Editor instance as first argument
        $scope.aceOptions.onLoad = function(_editor){
           $scope.aceEditor._editor = _editor;
           $scope.aceEditor._session = _editor.getSession();
        };

       //on event click used the following lines

        if($scope.aceEditor && $scope.aceEditor._editor){
              //Inserts text into wherever the cursor is pointing.
              $scope.aceEditor._editor.insert(imageTag);
            }

And view side

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

Hope this will help you !

from ui-ace.

knicefire avatar knicefire commented on August 24, 2024

My quick and dirty way of doing it

In controller:

editor.insert("text to insert");
angular.element(editor.container).controller('ngModel').$setViewValue(editor.getValue());

from ui-ace.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.