TinyMCE 和 AngularJS - 在 NgSwitch 之后不加载答案

【问题标题】：TinyMCE and AngularJS - not loading after NgSwitchTinyMCE 和 AngularJS - 在 NgSwitch 之后不加载
【发布时间】：2014-10-26 12:45:26
【问题描述】：

我希望我对这个帮助请求足够清楚，因为它很难解释，我不能在这里发布所有代码。我已经下载了代码以使 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 再次只是一个常规文本区域，并且正确的编辑器消失了。

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

【问题讨论】：

更正 - 我使用的是 ngShow 而不是 ngSwitch

标签： html angularjs tinymce

【解决方案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

【讨论】：