Replicating ng, si une directive

Question

J'ai donc cette directive qui permettra l'utilisation déclarative masquer ou afficher des éléments:

<div cdt-visible-to="Admin,Moderator">...</div> 

Ainsi, notre HTML devient aussi déclarative que possible. Et voici ce que notre directive ressemble à:

eDiscovery.directive('cdtVisibleTo', ['AuthService', function (AuthService) { 

    return { 

     restrict: 'AE', 

     link: function ($scope, elem, attrs) { 

     let cdtArray = String(attrs['cdtVisibleTo'] || '') 
     .split(/[ ,]+/).map(i => String(i).trim()).filter(i => i); 

     let ln = cdtArray.length; 

     for (let i = 0; i < ln; i++) { 
      let r = cdtArray[i]; 
      if(AuthService.hasPersona(r)){ 
      elem.removeAttr('hidden'); 
      return; 
      } 
     } 

     elem.attr('hidden', 'hidden'); 

     } 
    } 
    }]); 

C'est donc comme un remplaçant pour ng-show.

Ma question est: à quoi ressemblerait un remplaçant pour ng-if?

Quelle est la meilleure façon de supprimer des éléments du DOM avec une directive Angular?

Answer 1

Vous pouvez utiliser la méthode .remove() de l'élément angulaire pour supprimer un élément du DOM: d'abord obtenir l'élément angulaire de votre élém puis utilisez la fonction remove

Pour ce faire effectuer:

angular.element(elem).remove(); 

Je suppose que vous voulez le retirer du DOM si aucun des les Personas transmis à la directive est autorisée, vous pouvez alors peut-être utiliser le code suivant:

var notAuthorized = false; 
for (let i = 0; i < ln; i++) { 
    let r = cdtArray[i]; 
    if(AuthService.hasPersona(r)){ 
    notAuthorized = true; //A Persona is authorized 
    return; 
    } 
} 

if (notAuthorized) { 
    angular.element(elem).remove(); 
} 

En savoir plus & méthodes de angular.element: https://docs.angularjs.org/api/ng/function/angular.element