Question

我试图在角度中使用一个名为contenttool的非常好的库，所以我写了一个指令。在页面上有任何多个可编辑字段，当我保存任何字段时，我的函数被多次调用。假设我保存任何字段时有5个字段，那么我的保存功能被调用5次。这是我写的代码。

app.directive('ngEditor',  function(){

    function link(scope, element, attrs){

        // Initialise the editor
        scope.editor = new ContentTools.EditorApp.get();
        scope.editor.init('[ng-editor]', 'ng-editor');

        // Bind a function on editor save
        if (scope.editor._bindings['saved'] && scope.editor._bindings['saved'].length > 0) {

        }
        scope.editor.addEventListener('saved', function (ev) {
            scope.$apply(function(){
                scope.regions = ev.regions;
                regions = ev.detail().regions;
                if (Object.keys(regions).length == 0) {
            return;
        }

            // Set the editor as busy while we save our changes
                scope.editor.busy(true);

        // Collect the contents of each region into a FormData instance
        payload = new FormData();
        for (name in regions) {
             if (regions.hasOwnProperty(name)) {
                        payload.append(name, regions[name]);
              }
             }

        // Send the update content to the server to be saved
        function onStateChange(ev) {
            // Check if the request is finished
             if (ev.target.readyState == 4) {
                    scope.editor.busy(false);
                    if (ev.target.status == '200') {
                            // Save was successful, notify the user with a flash
                            new ContentTools.FlashUI('ok');
                        } else {
                            // Save failed, notify the user with a flash
                            new ContentTools.FlashUI('no');
                        }
                               }
                          }
                xhr = new XMLHttpRequest();
                xhr.addEventListener('readystatechange', onStateChange);
                xhr.open('POST', updateUrl);
                xhr.send(payload);
            });
        });
    }
    return {
        link: link
    }
})

解决此错误的任何解决方案？

Answer 1

您似乎每个字段都有一个编辑器。从the documentation您可以看到

EditorApp类实际上是一个提供的包装类默认情况下，单例访问开箱即用的内容编辑器。

这意味着如果您链接5次并且编辑器有一个单例，您将实际注册事件5次。

我不完全确定它的样子，但如果我理解正确，只注册一次save事件就足够了。例如。您可以在指令的控制器中执行此操作，并确保仅调用一次。

当与angular一起使用时，在getContenttool中多次调用保存函数

1 个答案: