My current situation right now is rather tricky and I've been bashing my head for two days straight trying to fix this problem.
I have accordion sections in which there is a space reserved to add/deleted/update and attach tags, in each of them. My main problem is that each of those sections are instanciated by a same directive, so each of them have their own isolated scope.
What I need is when I delete a tag from the available tags list, the tag must visually disappear dynamically within the section immediately, and within every other sections in which the tag was attached into. This needs to happen dynamically without needing to refresh the page.
This is my current directive that is instanciated for every accordion section.
(function () {
'use strict';
angular.module('myApp.section.sectionTag')
.directive('sectionTag', ['$translate', 'SectionTagService', 'modalService', 'UIService', 'SECTION_TAG_ACTION',
function ($translate, SectionTagService, modalService, UIService, SECTION_TAG_ACTION) {
return {
transclude:true,
scope: {
bundleid: '@',
disable: '=',
employeurid: '@',
listetags: '=',
currentbundletags: '=',
id: '@',
},
templateUrl: '/html/partiels/section/SectionTag/SectionTagTemplate.html',
link: function (scope, element, attrs) {
scope.open = false;
scope.listetags.forEach((tag) => {
tag.Checked = false;
});
scope.currentbundletags.forEach((currentTag) => {
scope.listetags.forEach((tag) => {
if(tag.SectionTagID == currentTag.SectionTagID){
tag.Checked = true;
currentTag.Nom = tag.Nom;
}
});
});
ReOrderTags();
scope.OnClickOpenTag = () => {
return scope.open = !scope.open;
};
scope.OnCheck = (tag) => {
if(tag.Checked){
SectionTagService.Associer(scope.bundleid, tag.SectionTagID).then(() => {
scope.currentbundletags.push({
SectionTagID: tag.SectionTagID,
SectionTagBundleID: scope.bundleid,
Nom: tag.Nom,
});
ReOrderTags();
})
.catch(() => {
tag.Checked = false;
modalService.Modal('error');
});
} else if (!tag.Checked){
SectionTagService.Dissocier(scope.bundleid, tag.SectionTagID).then(() => {
scope.currentbundletags = scope.currentbundletags.filter((currentTag) => currentTag.SectionTagID !== tag.SectionTagID);
ReOrderTags();
})
.catch(() => {
tag.Checked = true;
modalService.Modal('error');
});
}
};
scope.OnClickDeleteTag = (tag) => {
var modalSupprimer = modalService.Modal('supprimerSectionTag', { nom: tag.Nom });
modalSupprimer.closePromise
.then((data) => {
if (data.value === 1) {
SectionTagService.Delete(tag.SectionTagID)
.then(function () {
UIService.Success($translate.instant('supprimerSectionTagSuccess'));
scope.listetags = scope.listetags.filter((x) => x.SectionTagID !== tag.SectionTagID);
scope.currentbundletags = scope.currentbundletags.filter((currentTag) => currentTag.SectionTagID !== tag.SectionTagID);
scope.$emit(SECTION_TAG_ACTION.DELETED, {
tagDeleted: tag,
});
})
.catch(() => {
modalService.Modal('error');
});
}
});
};
scope.OnClickInsertTag = () => {
var modalInsert = modalService.Modal('creerEditerSectionTag', { tag: {EmployeurID: scope.employeurid, Nom: null}});
modalInsert.closePromise
.then((data) => {
if (data.value) {
SectionTagService.Insert(data.value)
.then(function (tag) {
UIService.Success($translate.instant('creerSectionTagSuccess'));
scope.listetags.push(tag);
scope.$emit(SECTION_TAG_ACTION.INSERTED, {
tagInserted: tag,
});
})
.catch(() => {
modalService.Modal('error');
});
}
});
};
scope.OnClickUpdateTag = (tag) => {
var sectionTag = angular.copy(tag);
var modalModifier = modalService.Modal('creerEditerSectionTag', { editMode: true, tag: preventionTag});
modalModifier.closePromise
.then((data) => {
if (data.value) {
SectionTagService.Update(data.value)
.then(function (tagUpdated) {
UIService.Success($translate.instant('editerSectionTagSuccess'));
scope.listetags.forEach((tag) => {
if(tag.SectionTagID == tagUpdated.SectionTagID){
tag.Nom = tagUpdated.Nom;
}
});
scope.currentbundletags.forEach((currentTag) => {
if(currentTag.SectionTagID == tagUpdated.SectionTagID){
currentTag.Nom = tagUpdated.Nom;
}
});
scope.$emit(SECTION_TAG_ACTION.UPDATED, {
tagUpdated: tagUpdated,
});
})
.catch(() => {
modalService.Modal('error');
});
}
});
};
function ReOrderTags() {
scope.currentbundletags.sort((a, b) => {
const A = a.Nom.toUpperCase();
const B = b.Nom.toUpperCase();
if(A < B){
return -1;
}
if(A > B){
return 1;
}
return 0;
});
};
},
};
}]);
})();
I must be able to create a new tag, attach it to my current section and other ones (siblings), and then delete if off immediately after and see it no more anywhere I look, without needing to refresh the page. It has to be done dynamically.
I have tried with $watch, forcing $digests manually and $apply too, I have tried event emitting/broadcasting, I have tried making a shared service, nothing works.
Whenever I delete a tag, it disappears from the accordion section in which I did the action of, but still remains showing in other sibling sections. I don't know what else to try anymore.