我将angularjs
与ui-ace
结合使用,ace
是一个拥有热门string[]
库指令的库。
我对指令进行了一些修改,因为我需要它来处理$scope.Model
而不是普通的字符串。切换我的核心模型时,除了奇怪的情况外,一切正常。以下是它的设置方式;
Scripting
将填充数据库中的信息string[]
的属性,它是$scope.Model.Scripting.join('\n')
,并且绑定到ace文本编辑器。onChange
onBlur
和onBlur
事件中以不同方式重复。现在,出现问题的是,在点击网格中的项目之前,我必须实际点击文本编辑器来触发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拥有重现问题所需的一切,包括如何操作的确切说明。
{{1}}
答案 0 :(得分:1)
您似乎错误地为您的阵列案例设置了ngModel.$formatters
。
尝试更改:
else if (angular.isArray(value)) {
return '';
}
要:
else if (angular.isArray(value)) {
return value.join('');
}
我个人认为将连接数组传递给模型并且不修改指令会更容易。那么您将来不会遇到升级问题
的 DEMO 强>