Репликация ng-if с директивой

Question

Итак, у меня есть эта директива, которая позволит декларативно скрывать или показывать элементы:

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

Таким образом, наш HTML становится максимально декларативным. И вот как выглядит наша директива:

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');

      }
    }
  }]);

Так что это как замена для ng-show,

Мой вопрос - что бы заменить ng-if выглядит как?

Каков наилучший способ удалить элементы из DOM вместе с директивой Angular?

Answer 1

Вы можете использовать метод.remove() элемента Angular для удаления элемента из DOM: сначала получите угловой элемент от вашего элемента, а затем используйте функцию удаления

Для этого выполните:

angular.element(elem).remove();

Я предполагаю, что вы хотите удалить его из DOM, если никто из Personas, переданных в директиву, не авторизован, поэтому, возможно, вы можете использовать следующий код:

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();
}

Больше информации и методов angular.element: https://docs.angularjs.org/api/ng/function/angular.element