Question

当我在自定义指令中调用ui-tinymce指令时，我当前遇到了问题。 custom指令用于从后端为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指令，所以我认为这是破坏的数据绑定。试着用手表观看，但没有任何反应。我无法弄清楚如何修复它所以我现在正在寻找一些帮助...

THX

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未更新

1 个答案: