I'm currently working on a directive that allows me to control certain elements in the DOM based on user permissions. I recently discovered the .remove() function which works really well for removing elements.
However, my issue arises when the user's permissions change and I need to show the DOM element again after it has been removed using .remove(). Any ideas on how I can achieve this?
Below is a snippet of my code:
ddo.link = function(scope, el, attrs){
// Validate the permission
if( currentUserService.isAllowed(scope.validatePermission) !== true) {
el.remove();
}
// Listener for changes
$rootScope.$on("eventName", function(event, param){
// Validate the permission
if( currentUserService.isAllowed(scope.validatePermission) !== true) {
el.remove();
} else {
// SHOW THE ELEMENT AGAIN!
}
});
};
Alternatively, are there any other methods to remove and insert HTML elements? Using CSS alone can be vulnerable as users can disable it through the Developer console...
Thank you in advance!