I have an application that allows users to upload an image and then place tags on the image with product information. The tags are initially hidden and can be toggled once they have been saved. I have an edit button that opens an edit modal that allows the user to edit the tags. When the modal opens I want to make a temporary copy of the tags so when Cancel button is clicked the modal closes and displays the original tags. In the modal I have
$scope.tags = [];
angular.copy($scope.item.tags, $scope.tags);
but the first time the modal opens none of the product information is in the $scope.tags so the tag box is displayed with no product information.
[Object, Object]
0: Object
product: Object
_id: "xxxxx"
However if I display the tags on the image in the original view before opening the modal, then the angular.copy copies all of the product info. This works exactly how I want it to, but I can only get it to work if I toggle to tags on before loading the modal.
[Object, Object]
0: Object
product: Object
_id: "xxxxx"
age: ""
available: true
brand: "FOSSIL"
category: "WATCH"
I also tried $scope.tags = _.copy($scope.item.tags, true)
, but any changes I make to an existing tag changes both $scope.tags and $scope.item.tags so when I click cancel the changed information is displayed not the original information. What is strange about this is that if I add a new tag in the edit and click cancel it does not save the new tag only the original tags or edits to the original tags.
I open the modal from a directive with
scope.showPhotoEditModal = function ($event, item) {
scope.togglePhotoTags($event, item);
ModalService.modal("photo-edit-modal", {
template: "templates/photo-edit.html",
scope: scope
}).then(function (modal) {
modal.show();
});
};
Am I missing some logic somewhere or is there a better way to make a temporary copy?