带有ace代码编辑器的angularjs-在模型更改时强制编辑器执行“ onblur”

天空

angularjs与结合使用ui-ace,该库具有针对流行ace的指令

ui-ace

ace文字编辑器

我对该指令进行了一些修改,因为我需要它与一起使用string[],而不是与普通字符串一起使用。切换我的核心模型时,除了一个奇怪的情况外,一切正常。它是这样设置的;

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

现在,出问题的是,我必须真正单击文本编辑器才能触发onBlur事件,然后再单击网格中的项目。每次都必须重复一次,否则编辑器将不会更新。我不知道为什么会这样。

这是相关的代码。我还将链接整个指令。窃听者拥有重现此问题所需的一切,包括有关如何重做的确切说明。

完整演示和完整指令实况(Plunkr)

相关指令变更

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);
        }
查理

看起来您ngModel.$formatters为阵列盒设置不正确。

尝试更改:

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

到:

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

我个人认为将联接数组传递给模型而不修改指令会更容易。这样您以后的升级就不会有问题

DEMO

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章