Question

我正在使用ng-grid。在ng-grid中，我有几个文本框和一个按钮。通过单击按钮，将打开一个ace编辑器，我可以在其中编辑/添加文本。但是当我点击按钮时，编辑器上没有焦点（没有光标闪烁），我必须手动点击编辑器才能获得焦点。这是部分我的html和js文件代码

html：

<div class="modal fade" id="valueModal" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button id="mbx-procsr-properties-closeFile" type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                            <h4 class="modal-title">Edit Value</h4>
                        </div>
                        <div class="modal-body">
                            <div ui-ace="{onLoad : loadValueData,
                  theme : 'chaos',
                  useWrapMode : true,
                  showGutter: true,
                  mode: 'json'
                }">
                            </div>
                            <div class="modal-footer">
                                <button id="mbx-procsr-properties-close" type="button" class="btn btn-default" data-dismiss="modal" ng-click="close()">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

使用Javascript：

 $scope.loadValueData = function (_editor) {
 editor = _editor;
 _editor.getSession().setUseWorker(false);
 _editor.focus();
 };

我希望焦点/光标在ace编辑器上闪烁

我正在为您提供 ng-grid-gridOptionsForProcessor

的代码段

<textarea  class="form-control"  ng-model="COL_FIELD" style="width:90%;height:45px" placeholder="required" />\n\
                                    <a ng-click="isModal(row)" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#valueModal"  class="right">\n\
                                    <i class="glyphicon glyphicon-new-window"></i>

\ n \

并且isModal的内容是

$scope.isModal = function (row) {
                rowObj = row;
                editor.setValue(row.getProperty('value').toString());

因此可以在isModal中设置焦点

Answer 1

所以你遇到的问题是你希望在模态显示后重点发生。在显示模态后，您需要将focus (and gotoLine)置于$ timeout中。这个解决方案有点讨厌，因为我们只是假设模式和编辑器在点击的isModal被触发后稍微准备好了。

  // make sure you include the $timeout dependency

  var editor;
  $scope.loadValueData = function (_editor) {
    editor = _editor;
    editor.getSession().setUseWorker(false);
    editor.setReadOnly(true);
  };

  var enableAndFocusEditor = function() {
    if (editor) {
      editor.focus();
      var session = editor.getSession();
      //Get the number of lines
      var count = session.getLength();
      //Go to end of the last line
      editor.gotoLine(count, session.getLine(count-1).length);
      editor.setReadOnly(false);
    }
  };

  $scope.isModal = function (row) {
    $scope.rowObj = row;
    $timeout(enableAndFocusEditor,500);
    //editor.setValue(row.getProperty('value').toString());
  };

  $scope.close = function() {
    $scope.rowObj = null;
    editor && editor.setReadOnly(true);
  };

I got the code for putting the focus at the end from this answer.

参见示例：http://plnkr.co/edit/KqgY32?p=preview

我可以看到你正在使用Bootstrap Javascript来打开和关闭模式，所以我给你一个适用于该用例的答案，虽然这是我认为完成它的一种hacky方式。正确的方法是使用angular-ui bootstrap库，以便在AngularJS控制器中使用更好的api - 然后你可以知道实际显示模态的时间。可以挂钩到Bootstrap的'shown.bs.modal'事件，但为此你必须编写自己的指令。

专注于ace编辑器

1 个答案: