Question

我希望我对这个援助请求足够清楚，因为很难解释，我不能在这里发布所有代码。我已下载代码以使TinyMCE能够在AngularJS的NgRepeat中使用：

angular.module('ui.tinymce', [])
    .value('uiTinymceConfig', {})
    .directive('uiTinymce', ['uiTinymceConfig', function (uiTinymceConfig) {
        uiTinymceConfig = uiTinymceConfig || {};
        var generatedIds = 0;
        return {
            require: 'ngModel',
            link: function (scope, elm, attrs, ngModel) {
                var expression, options, tinyInstance;
                // generate an ID if not present
                if (!attrs.id) {
                    attrs.$set('id', 'uiTinymce' + generatedIds++);
                }
                options = {
                    // Update model when calling setContent (such as from the source editor popup)
                    setup: function (ed) {
                        ed.on('init', function (args) {
                            ngModel.$render();
                        });
                        // Update model on button click
                        ed.on('ExecCommand', function (e) {
                            ed.save();
                            ngModel.$setViewValue(elm.val());
                            if (!scope.$$phase) {
                                scope.$apply();
                            }
                        });
                        // Update model on keypress
                        ed.on('KeyUp', function (e) {
                            ed.save();
                            ngModel.$setViewValue(elm.val());
                            if (!scope.$$phase) {
                                scope.$apply();
                            }
                        });
                    },
                    mode: 'exact',
                    elements: attrs.id
                };
                if (attrs.uiTinymce) {
                    expression = scope.$eval(attrs.uiTinymce);
                } else {
                    expression = {};
                }
                angular.extend(options, uiTinymceConfig, expression);
                setTimeout(function () {
                    tinymce.init(options);
                });


                ngModel.$render = function () {
                    if (!tinyInstance) {
                        tinyInstance = tinymce.get(attrs.id);
                    }
                    if (tinyInstance) {
                        tinyInstance.setContent(ngModel.$viewValue || '');
                    }
                };
            }
        };
    }]);


var gwApp = angular.module('gwApp', ['ui.tinymce']);

我真的不明白这段代码，但最初工作正常。我的页面以帖子列表开头。我点击第一篇文章的“显示回复”，并使用NgSwitch多个回复变得可见（嵌套的NgRepeat）。我使用RESTful API服务和http调用（这里发布的代码太多）提交了一条新的回复消息（使用tinymce输入了回复文本）。然后在单击新回复消息的提交按钮后，NgSwitch意外再次启动以使回复不再可见。当我再次扩展回复时，tinymce再次只是一个普通的textarea，并且正确的编辑器已经消失。

我知道这不是很清楚，但我希望有人能够理解我所写的内容并帮助我解决这个问题。

Answer 1

我使用ng-switch和ng-show遇到了同样的问题，所以我补充说：

scope.$watch('onHidden()',function(){ tinymce.editors = [] });

在setTimeout函数之后。

同时替换

ed.on('init',function(args){  ngModel.$render(); });

与

ed.on('init',function(args){  ed.setContent(ngModel.$viewValue); });

并删除$render功能。

This is the link to the working code in JsFiddle

TinyMCE和AngularJS - 在NgSwitch之后不加载

1 个答案: