GetmeUK / ContentTools

A JS library for building WYSIWYG editors for HTML content.
http://getcontenttools.com
MIT License
3.95k stars 395 forks source link

Save function is getting called multiple times in angular. #437

Closed iit2011081 closed 6 years ago

iit2011081 commented 6 years ago

I am trying to use contenttool in angular so I have written one directive. On a page there any multiple editable fields, when I save any field my function gets called multiple times. Suppose I have 5 fields when I save any field then my save function gets called 5 times. This is the code which I have written.

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
    }
}) 
anthonyjb commented 6 years ago

Hi @iit2011081 - the likely cause is that either the editor is being initialized multiple times on page load or the saved event handler is being applied multiple times - e.g once per field.

I don't know angular at all so I can't suggest why this might be happening I'm afraid.

iit2011081 commented 6 years ago

May be because of directive it is getting initialized mutiple times.