Angularjs 可能是有角的小虫子

发现指令中可能存在的错误。我有一个解决办法，但它很难看，正在寻找更好的解决方案

基本上，除了在页面上使用相同的配置需要超过1个textarea外，其他一切都可以正常工作。例如：

@Html.TextArea("BodyContent", null, new { @class = "form-control", ng_model = "bodyContent", ui_tinymce = "tinyMCEOptions" })

@Html.TextArea("Translate_BodyContent", null, new { @class = "form-control", ng_model = "translation.bodyContent", ui_tinymce = "tinyMCEOptions" })

配置如下所示：

$scope.tinyMCEOptions = {
        selector: "textarea#BodyContent,textarea#Translate_BodyContent",
        theme: "modern",
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor"
        ],
        toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        toolbar2: "print preview media | forecolor backcolor emoticons",
        image_advtab: true,
        templates: [
            { title: 'Test template 1', content: 'Test 1' },
            { title: 'Test template 2', content: 'Test 2' }
        ],
        content_css: tinyMCEContentCss
    };

它们都将像预期的那样成为TinyMCE编辑器，但问题是当将数据发送到服务器进行保存时，第二个编辑器的值始终为空。。。ui tinymce似乎正在绑定第二个文本区域。我的解决方法是复制上述内容，并将每个textarea设置为具有自己的配置：

    @Html.TextArea("BodyContent", null, new { @class = "form-control", ng_model = "bodyContent", ui_tinymce = "tinyMCEOptions" })

    @Html.TextArea("Translate_BodyContent", null, new { @class = "form-control", ng_model = "translation.bodyContent", ui_tinymce = "tinyMCEOptions2" })


$scope.tinyMCEOptions = {
        selector: "textarea#BodyContent",
        theme: "modern",
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor"
        ],
        toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        toolbar2: "print preview media | forecolor backcolor emoticons",
        image_advtab: true,
        templates: [
            { title: 'Test template 1', content: 'Test 1' },
            { title: 'Test template 2', content: 'Test 2' }
        ],
        content_css: tinyMCEContentCss
    };

    $scope.tinyMCEOptions2 = {
        selector: "textarea#Translate_BodyContent",
        theme: "modern",
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor"
        ],
        toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        toolbar2: "print preview media | forecolor backcolor emoticons",
        image_advtab: true,
        templates: [
            { title: 'Test template 1', content: 'Test 1' },
            { title: 'Test template 2', content: 'Test 2' }
        ],
        content_css: tinyMCEContentCss
    };

不得不那样做相当可怕。。我希望有一个比重复代码更优雅的解决方案

编辑

此处的部分角度代码有助于：

var TranslationVM = function (item) {
    this.id = '00000000-0000-0000-0000-000000000000';
    this.pageId = '00000000-0000-0000-0000-000000000000';
    this.cultureCode = '';
    this.title = '';
    this.isEnabled = false;
    this.metaKeywords = '';
    this.metaDescription = '';
    this.bodyContent = '';

    if (item) {
        this.id = item.Id;
        this.pageId = item.PageId;
        this.cultureCode = item.CultureCode;
        this.title = item.Title;
        this.isEnabled = item.IsEnabled;
        this.metaKeywords = item.MetaKeywords;
        this.metaDescription = item.MetaDescription;
        this.bodyContent = item.BodyContent;
    }
};

pagesApp.controller('pageController', function ($scope, $http) {
    $scope.emptyGuid = '00000000-0000-0000-0000-000000000000';

    $scope.id = $scope.emptyGuid;
    $scope.title = '';
    $scope.slug = '';
    $scope.metaKeywords = '';
    $scope.metaDescription = '';
    $scope.isEnabled = false;
    $scope.bodyContent = '';
    $scope.cssClass = '';
    $scope.cultureCode = '';
    $scope.translation = new TranslationVM();
    //etc

---

您不必复制对象，因为在“use strict”中使用JavaScript；将抛出的模式。因此，我找到的解决方案是将一个空对象，即{}传递到第二个或后续的tinymce指令属性中，如下所示：

<textarea ui-tinymce="{}"> </textarea>

---

当然，不需要复制/粘贴两次就可以以更简洁的方式重复对象。注意，一个ng模型中有对象属性，另一个模型中有基本体。在ng模型中应该始终有一个点。也可能与您的issue@charlietfl，从我的帖子中不清楚，但这两个文本区域是不相关的；正确指定了属性。请参阅我上面的更新，以了解角度控制器的部分最佳建议是在plunker中进行演示，复制问题并在github repo for指令中作为问题发布。@charlietfl，感谢您的建议；我刚刚在这里补充了这个问题：