使用ace代码编辑器的angularjs - 强制编辑器在模型更改时执行'onblur'

时间:2014-09-08 22:14:46

标签: angularjs

我将angularjsui-ace结合使用,ace是一个拥有热门string[]库指令的库。

ui-ace

ace text editor

我对指令进行了一些修改,因为我需要它来处理$scope.Model而不是普通的字符串。切换我的核心模型时,除了奇怪的情况外,一切正常。以下是它的设置方式;

  • 我的数据库中有一个包含对象的网格。
  • 单击网格中的项目时,Scripting将填充数据库中的信息
  • 这包括一个名为string[]的属性,它是$scope.Model.Scripting.join('\n'),并且绑定到ace文本编辑器。
  • 编辑器的文本设置为onChange
  • 此行为在编辑器的onBluronBlur事件中以不同方式重复。

现在,出现问题的是,在点击网格中的项目之前,我必须实际点击文本编辑器来触发return { restrict: 'EA', require: '?ngModel', priority: 1, link: function (scope, elm, attrs, ngModel) { /** * Corresponds to the ngModel, and will enable * support for binding to an array of strings. */ var lines = scope.$eval(attrs.ngModel); /************************************************* * normal ui-ace code ************************************************/ /** * Listener factory. Until now only change listeners can be created. * @type object */ var listenerFactory = { /** * Creates a blur listener which propagates the editor session * to the callback from the user option onBlur. It might be * exchanged during runtime, if this happens the old listener * will be unbound. * * @param callback callback function defined in the user options * @see onBlurListener */ onBlur: function (callback) { return function (e) { if (angular.isArray(lines)) { scope.$apply(function () { ngModel.$setViewValue(acee.getSession().doc.$lines); }); } executeUserCallback(callback, acee); }; } }; // Value Blind if (angular.isDefined(ngModel)) { ngModel.$formatters.push(function (value) { if (angular.isUndefined(value) || value === null) { return ''; } else if (angular.isArray(value)) { return ''; } // removed error if the editor is bound to array else if (angular.isObject(value)) { throw new Error('ui-ace cannot use an object as a model'); } return value; }); ngModel.$render = function () { if (angular.isArray(lines)) { session.setValue(scope.$eval(attrs.ngModel).join('\n')); } else { // normal ui-ace $render behavior } }; } // set the value when the directive first runs. if (angular.isArray(lines)) { ngModel.$setViewValue(acee.getSession().doc.$lines); } 事件。这必须每次重复,否则编辑器将不会更新。我无法弄清楚为什么会这样。

这是相关代码。我也将链接整个指令。 plunkr拥有重现问题所需的一切,包括如何操作的确切说明。

Full Demonstration and Full Directive Live (Plunkr)

相关指令变更

{{1}}

1 个答案:

答案 0 :(得分:1)

您似乎错误地为您的阵列案例设置了ngModel.$formatters

尝试更改:

else if (angular.isArray(value)) {
     return '';
}

要:

else if (angular.isArray(value)) {
    return value.join('');
}

我个人认为将连接数组传递给模型并且不修改指令会更容易。那么您将来不会遇到升级问题

DEMO