Save function is getting called multiple times in getContenttool when used with angular

Question

I am trying to use a very good library named 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
    }
}) 

Any solution to resolve this error ?

Answer 1

You seem to have an editor per field. From the documentation you can see that

The EditorApp class is actually a wrapper class that provides singleton access to, by default, the out of the box content editor.

which means that if you link 5 times and you have one singleton for the editor you will actually register the events 5 times.

I am not completely sure how it looks like, but if I understand correctly it would be sufficient to register the save event only once. E.g. you might do this in the controller of your directive and make sure it is only called once.