Creating a custom directive to mimic the behavior of ng-if

Question

Creating a custom directive to mimic the behavior of ng-if

Hey there! I've got this cool directive that lets you conveniently hide or show elements:

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

By using this directive, our HTML code becomes more declarative. Here's a snippet of what the directive implementation looks like:

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

      }
    }
  }]);

This directive acts similar to ng-show, but I'm curious about creating a replacement for ng-if.

What would be the most efficient way to completely remove elements from the DOM using an Angular directive?

javascript angularjs angular-directive angular-directive-link

Answer 1

Answer №1

If you need to remove an element from the DOM in Angular, you can use the .remove() method of Angular element: First, retrieve the angular element using your elem variable and then call the remove function.

To achieve this, follow these steps:

angular.element(elem).remove();

Perhaps you want to remove the element from the DOM if none of the Personas passed to the directive is authorized. In that case, consider using the code snippet below:

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

For additional information and methods related to angular.element, visit: https://docs.angularjs.org/api/ng/function/angular.element

Answer 2

If you need to remove an element from the DOM in Angular, you can use the .remove() method of Angular element: First, retrieve the angular element using your elem variable and then call the remove function.

To achieve this, follow these steps:

angular.element(elem).remove();

Perhaps you want to remove the element from the DOM if none of the Personas passed to the directive is authorized. In that case, consider using the code snippet below:

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

For additional information and methods related to angular.element, visit: https://docs.angularjs.org/api/ng/function/angular.element

Creating a custom directive to mimic the behavior of ng-if

Answer №1

Similar questions

npm WARNING: The package @angular-devkit/[email protected] is in need of a peer dependency xxxx, however no installation for this dependency has

Angular 5 - Strategies for excluding specific properties from Observable updates

Mastering Cookies in Javascript

The functionality to remove table rows when checkboxes are selected is not functioning as expected in an Angular 7 application

The external function in HTML Form's onsubmit attribute is failing to execute

Is one round the limit for my JavaScript image slider?

I'm curious if there is a method in c3 js that allows for displaying additional x-axis values when zooming in

The antithesis of jQuery's .parents() selector

Verify the presence of the "text/ng-template" element

What is the Most Effective Way to Generate Sequential Output in PHP?

Could this truly be jQuery in action?

Initiating Axios requests after a period of time, such as a day, week, or

Steps to make a dropdown menu that showcases all files within a folder using HTML5 and Javascript

When deployed, Angular 14 and Bootsrap 5 are functioning properly on a local environment but encountering issues on an online

Error: The property "id" cannot be destructured from req.params because it is not defined

Retrieve JSON data from a different controller or service method in AngularJS

What is the process for obtaining a compilation of warnings from the next.js terminal?

Having trouble with jQuery UI draggable when using jQueryUI version 1.12.1?

Triumph awaits before the final response is delivered

Utilizing a numeric array as an associative array in JavaScript