7

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

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 并没有使数据在开始时可见。

有什么方法可以强制显示视图窗口内容吗？

4

5 回答 5

1

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

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

在您的控制器中：

$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需要时调用。我希望这会有所帮助。

更新：（更新后）

我不知道您的控制器是嵌套的。这在 Angular 中可能会变得非常棘手，但我会尝试提供一些可能的解决方案（鉴于我无法查看您的所有代码和项目布局）。范围事件（如此处所述）特定于范围的嵌套，并且仅向子范围发出事件。因此，我建议尝试以下三种解决方案之一（按我个人喜好的顺序列出）：

1) 重新组织你的代码以获得更简洁的布局（更少的控制器嵌套），以便你的范围是直接的后代（而不是兄弟控制器）。

2）我会假设这1)是不可能的。接下来我会尝试使用该$scope.$broadcast()功能。此处也列出了其规格。$emit和之间的区别在于$broadcast$emit 只向子 $scopes 发送事件，而 $broadcast 会将事件发送到父范围和子范围。

3) 忘记$scope在 Angular 中使用事件，而只使用通用 javascript 事件（使用框架，例如，jQuery甚至只是在此处的示例中滚动您自己的框架）

于 2013-10-14T16:04:26.760 回答
1

当您的 ckeditor 默认隐藏时，这是 ckeditor 的一个奇怪问题。试图显示编辑器有 30% 的机会编辑器不可编辑并且编辑器数据被清除。如果您试图隐藏/显示您的编辑器，请使用 css 技巧，例如position:absolute;left-9999px;隐藏编辑器并通过 css 将其返回。这样，ckeditor 不会在 DOM 中被删除，而只是定位在其他地方。

于 2013-10-25T06:11:01.253 回答
1

There's a fairly simple answer to the question. I checked the DOM and found out the data was getting loaded in fact all of the time. However it was not displaying in the Chrome browser. So the problem is more of a display issue with ckEditor. Strange solution seems to be to do a resize of the ckEditor window which then makes the text visible.

于 2013-10-19T18:26:34.643 回答
1

使用这个非常简单有效的java脚本代码。注意editor1是我的textarea id

<script>
  $(function () {
    CKEDITOR.timestamp= new Date();
    CKEDITOR.replace('editor1');
  });
</script>

第二种方式在控制器中，当您的查询从数据库中获取数据时，请使用

是 .success(function() 之后的代码。

 $http.get(url).success(function(){
   CKEDITOR.replace('editor1');
});
于 2016-07-25T08:11:46.547 回答
0

我知道，这个线程已经死了一年，但我遇到了同样的问题，我找到了另一个（仍然很丑）解决这个问题的方法：

instance.setData(html, function(){
  instance.setData(html);
});
于 2014-11-14T09:32:30.503 回答