ckeditor - ckEditor的 View 区域有时在开始时显示为空

Question

我正在使用以下指令来创建 ckEditor View 。指令还有其他行用于保存数据，但这些行不包括在内，因为保存总是对我有用。

app.directive('ckEditor', [function () {
    return {
        require: '?ngModel',
        link: function ($scope, elm, attr, ngModel) {
            var ck = ck = CKEDITOR.replace(elm[0]);

            ngModel.$render = function (value) {
            ck.setData(ngModel.$modelValue);
            setTimeout(function () {
                ck.setData(ngModel.$modelValue);
            }, 1000);
        };            }
    };
}])

窗口出现，但第一次几乎总是空的。单击 [SOURCE] 按钮显示源并再次单击后，窗口中将填充数据。

我非常确定 ck.setData 可以正常工作，因为我尝试了 ck.getData，然后将输出记录到控制台。然而，似乎 ck.setData 并没有使数据在开始时可见。

是否有某种方法可以强制显示 View 窗口内容？

Answer 1

您可以随时在模型上调用渲染，它只会执行您告诉它执行的操作。在您的情况下，调用 ngModel.$render() 将获取 $modelValue 并将其传递给 ck.setData()。 Angular 会在其摘要周期中每当需要时(即每当它注意到模型已更新时)自动调用 $render。但是，我注意到有时 Angular 无法正确更新，特别是在编译指令之前设置 $modelValue 的情况下。

因此，在设置模态对象时，您只需调用 ngModel.$render() 即可。唯一的问题是您必须有权访问 ngModel 对象才能执行此操作，而您的 Controller 中没有该对象。我的建议是执行以下操作:

在你的 Controller 中:

$scope.editRow = function (row, entityType) {
   $scope.modal.data = row;
   $scope.modal.visible = true;
   ...
   ...
   // trigger event after $scope.modal is set
   $scope.$emit('modalObjectSet', $scope.modal);  //passing $scope.modal is optional
}

在您的指令中:

ngModel.$render = function (value) {
    ck.setData(ngModel.$modelValue);
};

scope.$on('modalObjectSet', function(e, modalData){
    // force a call to render
    ngModel.$render();
});

这不是一个特别干净的解决方案，但它应该允许您在需要时调用 $render。我希望这会有所帮助。

更新:(更新后)

我不知道你的 Controller 是嵌套的。这在 Angular 中可能会变得非常棘手，但我会尝试提供一些可能的解决方案(假设我无法看到您的所有代码和项目布局)。作用域事件(如 here 所示)特定于作用域的嵌套，并且仅向子作用域发出事件。因此，我建议尝试以下三种解决方案之一(按我个人偏好的顺序列出):

1) 重新组织您的代码以具有更清晰的布局(更少的 Controller 嵌套)，以便您的作用域是直接后代(而不是同级 Controller )。

2) 我假设 1) 是不可能的。接下来我将尝试使用 $scope.$broadcast() 函数。其规范也列出为 here。 $emit 和 $broadcast 之间的区别在于 $emit 仅向子 $scope 发送事件，而 $broadcast 会将事件发送到父 和 子作用域。

3) 忘记在 Angular 中使用 $scope 事件，而只使用通用的 javascript 事件(使用诸如 jQuery 之类的框架，甚至只是像示例 here 中那样推出自己的事件) )