ui-tinymce 指令用于自定义指令模板：ngModel 未更新

Question

我目前在自定义指令中调用 ui-tinymce 指令时遇到问题。自定义指令用于从后端为 tinymce advlink 插件动态加载链接（+加载与作为属性传递给指令的键关联的 tinymce 选项对象）。

这是我的控制器：

module.controller('Ctrl', function ($scope) {
    $scope.test = {
        val: "gfsgfdgh"
    };
});

下面是我如何调用 HTML 中的指令：

<tinymce-custom type="minimal" ng-model="test.val"></tinymce-custom>`

这是我的指令：

module.directive('tinymceCustom', function($location, TinyService, Module, GenerateurPage) {
    return {
        restrict: 'E',
        replace: true,
        require:"ngModel",
        scope: {
            ngModel: '='
        },
        link: function(scope, element, attrs, ngModel){

            scope.loaded = {
                modules: false,
                pages: false,
                tinymce: false
            };

            scope.tinyOptions = {};

            var link_list = [];

            var modules = [];
            var pages = [];

            Module.findByOrganisme({}, function (data) {
                data.forEach(function(module) {
                    modules.push({title: module.libelle, value: "/modules/"+module.id});
                });
                link_list.push({title: "Modules", menu: modules});

                scope.loaded.modules = true;
                initTiny();
            });

            GenerateurPage.findByOrganisme({}, function(data) {
                data.forEach(function(page) {
                    pages.push({title: page.titre, value: "/#/generateurPage/afficherPage?id=/"+page.id});
                });
                link_list.push({title: "Pages", menu: pages});

                scope.loaded.pages = true;
                initTiny();
            });

            function initTiny() {
                if (!scope.loaded.modules || !scope.loaded.pages) {
                    return false;
                }

                scope.tinyOptions = TinyService.options(attrs.type);
                console.log(scope);
                scope.tinyOptions.link_list = link_list;

                scope.loaded.tinymce = true;
            }

        },
        template: '<div ng-if="loaded.tinymce"><textarea ui-tinymce="tinyOptions" ng-model="ngModel"></textarea></div>'
    };
});

问题是传递给 ui-tinymce 指令的模型在使用编辑器更改文本时不会更新，而当来自控制器的模型更改时编辑器中的文本也不会更新。 .. 但是，初始 ngModel 值被传递给 ui-tinymce 指令，所以我认为这是被破坏的数据绑定。试图用 $watch 观看它，但没有任何反应。我不知道如何修复它，所以我现在正在寻求帮助...

感谢

Answer 1

最终通过更改方法修复了它：

<textarea tinymce-custom="minimal" ng-model="myVar"></textarea >

最终指令：

module.directive('tinymceCustom', function($location, $compile, $q, TinyService, Module, GenerateurPage) {
    return {
    restrict: 'A',
    priority:999,
    terminal:true, // prevent lower priority directives to compile after it
    scope: true,
    require: ['?ngModel'],
    link: function(scope, el, attrs) {

        // default is basic template
        var type = attrs.tinymceCustom ? attrs.tinymceCustom : 'basic';

        function loadTinyOptions(name) {
            var loaded = {
                modules: false,
                pages: false,
                tinymce: false
            };

            var link_list = [];

            var deferred = $q.defer();

            var initTiny = function() {
                if (!loaded.modules || !loaded.pages) {
                    return false;
                }

                var tinyOptions = TinyService.options(name);
                tinyOptions.link_list = link_list;

                deferred.resolve(tinyOptions);
            };

            Module.findByOrganisme({}, function (data) {
                var modules = [];

                data.forEach(function(module) {
                    modules.push({title: module.libelle, value: "/modules/"+module.id});
                });
                link_list.push({title: "Modules", menu: modules});

                loaded.modules = true;
                initTiny();
            });

            GenerateurPage.findByOrganisme({}, function(data) {
                var pages = [];
                data.forEach(function(page) {
                    pages.push({title: page.titre, value: "/#/generateurPage/afficherPage?id=/"+page.id});
                });
                link_list.push({title: "Pages", menu: pages});

                loaded.pages = true;

                initTiny();
            });

            return deferred.promise;
        }

        loadTinyOptions(type).then(function(data) {
            scope._tinyOptions = data;
            el.removeAttr('tinymce-custom'); // necessary to avoid infinite compile loop
            el.attr('ui-tinymce', '{{_tinyOptions}}');
            $compile(el)(scope);
        });
    }
};

希望对您有所帮助。

ui-tinymce 指令用于自定义指令模板：ngModel 未更新

ui-tinymce directive used into custom directive template : ngModel not updated

javascript

angularjs

angularjs-directive

tinymce-4

angular-ngmodel