“我正在使用可调整大小的句柄指令。我正在创建撤消/重做功能,然后将html推入数组,每当我单击撤消按钮时,可调整大小的句柄就会重复。”
我将ng-repeat html放入数组中,在其中我使用了可调整大小的指令。 每当我要追加html(撤消/重做的数组)时,可调整大小的句柄就会重复。
app.directive('rotateimage',function($ 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);
});
}
};