Изменяемый размер обрабатывает двойную проблему в функциональности отмены повторения

Question

"Я использую директиву изменяемого размера дескрипторов. Я создаю функцию отмены / возврата, затем я помещаю html в массив. Когда я нажимаю на кнопку отмены, изменяемые размеры ручки становятся дублирующимися."

Я помещаю нг-повтор html в массив, где использую директиву изменения размера. Всякий раз, когда я собираюсь добавить html (массив для отмены / повтора), изменяемые размеры маркеров становятся дубликатами.

app.directive ('rotateimage', функция ($ compile) {

    return {
        restrict: 'A',
        link: function postLink(scope, elem, attrs) {

            elem.resizable({
                handles: "ne, nw, se, sw,n,e,s,w",
                aspectRatio: true
            });

            elem.on('resizestop', function(evt, ui) {
                scope.id = [];
                scope.style = [];
                scope.html = [];
                var id = elem.parent(".div01").attr('id');
                scope.id.push(id);
                scope.style.push($("#" + id).attr('style'));
                $("#" + id).find(".ui-resizable-handle").remove();
                scope.html.push($("#" + id).html().trim());
                scope.historyApp.add(scope.style, scope.id, scope.html);


            });
            elem.on('resizestart', function(evt, ui) {
                console.log("loll");
                scope.id = [];
                scope.style = [];
                scope.html = [];


                var id = elem.parent(".div01").attr('id');
                scope.id.push(id);
                scope.style.push($("#" + id).attr('style'));
                $("#" + id).find(".ui-resizable-handle").remove();
                scope.html.push($("#" + id).html().trim());
                scope.historyApp.add(scope.style, scope.id, scope.html);


            });


        }
    };
});

$scope.historyApp = {
    stackStyle: [],
    stackId: [],
    html: [],
    dataorignlbgcrop: [],
    databbgval: [],
    counter: -1,
    add: function(style, id, html) {
        ++this.counter;
        this.stackStyle[this.counter] = style;
        this.stackId[this.counter] = id;
        this.html[this.counter] = html;
        this.doSomethingWith(style, id, html);
        $scope.countBoxVal = true;
        // delete anything forward of the counter
        this.stackStyle.splice(this.counter + 1);

        $scope.countBoxVal = true;
        //alert(this.counter);
        // alert($scope.countBoxVal);
    },
    undo: function() {

        --this.counter;
        // this.doSomethingWith(this.stackStyle[this.counter],this.stackId[this.counter]);
        this.doSomethingWith(this.stackStyle[this.counter], this.stackId[this.counter], this.html[this.counter]);
        --this.counter;

        $scope.countBoxVal = false;
    },
    redo: function() {

        ++this.counter;

        ++this.counter;
        this.doSomethingWith(this.stackStyle[this.counter], this.stackId[this.counter], this.html[this.counter]);

    },
    doSomethingWith: function(style, id, html) {

        if (this.counter <= 0) {
            this.counter = 0;
            $scope.couterStackEnter = "enter";
            //$scope.couterStackExit="undefined";
            $('#undo').addClass('disabled');
            $('#redo').removeClass('disabled');

        } else {

            $('#undo').removeClass('disabled');

        }

        var mathPro = Math.abs(this.counter);
        var kp = mathPro + 1;
        if (Math.abs(this.counter) >= this.stackStyle.length) {
            $('#redo').addClass('disabled');

            $scope.couterStackExit = "exit";

        } else {
            $('#redo').removeClass('disabled');
        }
        angular.forEach(html, function(val, key) {
            console.log($scope.historyApp);
            var myEl = angular.element(document.querySelector('#' + id[key]));

            var ids = myEl.find(".forReverseUndoRedo").attr("id");
            var myEls = angular.element(document.querySelector('#' + ids));


            setTimeout(function() {

                myEl.attr("style", style);
                // myEls.clone().html("");
                myEl.html("");
                myEl.find(".ui-resizable-handle").remove();
                myEl.append($compile(val)($scope));

                $scope.$digest();
            }, 100);
        });

    }
};