Creating a dynamic directive in AngularJS: Learn how to add or remove it from the DOM based on specific conditions

Question

Creating a dynamic directive in AngularJS: Learn how to add or remove it from the DOM based on specific conditions

Suppose I have a customized modal directive that looks like this:

return {
  restrict: 'E',
  templateUrl: 'modal.html',
  scope: {
    modalContent: "&",
    modalOpen: "&"
  }
}

And in the HTML:

<ng-modal modal-content="content" modal-open="active"></ng-modal>

How can I ensure that the modal is not present in the DOM when it is closed, and only gets inserted into the DOM when opened? I need to include the directive in the HTML for it to function properly, but this means the modal is already there even if it's not visible.

I have tried creating a Plunker with my progress so far here, but it only toggles the modal using CSS classes instead of completely removing it.

EDIT:

I have made another version available here, which actually adds and removes the directive from the DOM. This approach involves splitting the logic for adding and removing the directive between the directive itself and an external controller (the controller handles adding the element, while the directive handles removal). Is there a way for the directive to handle all of this on its own?

javascript angularjs dom

Answer 1

Answer №1

Have you achieved your desired outcome with this solution? I enclosed the content of your template within a single div for ease of accessing the entire chunk as one variable. Subsequently, I included and excluded that div based on whether you wish to display or hide it.

It seems impossible to eliminate the <ng-modal> element completely, but at least everything inside it can be removed...

Check out the demo here

html

<div>
  <div class="modal hide">
    <h4>{{modalContent.title}}</h4>
    <p>{{modalContent.text}}</p>
    <button ng-click="close()">Close Modal</button>
  </div>

  <div class="modal-overlay"></div>
</div>

js

var ModalDirective = function() {
  return {
    restirct: 'E',
    templateUrl: 'modal.html',
    scope: {
      modalContent: "=",
      modalOpen: "="
    },
    link: function(scope, element, attrs) {
      var modalElements = element.children()[0];
      console.log(element);

      function addModal() {
        console.log('Opening modal');
        element.addClass('open');
        //add the modal elements back into the directive
        if (modalElements) {
          //should be 0
          console.log('Element child count before add', element.children().length);
          element[0].appendChild(modalElements);
           //should be 1
           console.log('Element child count after add', element.children().length);
        }
      }

      function removeModal() {
        element.removeClass('open');
        console.log('Closing modal');
        if (modalElements) {
          //remove the modal elements from the directive
           //should be 1
          console.log('Element child count before remove', element.children().length);
          element[0].removeChild(modalElements);
          //should be 0
          console.log('Element child count after remove', element.children().length);
        }
      }

      scope.$watch('modalOpen', function(newVal, oldVal) {

        if (newVal) {
          addModal();
        } else {
          removeModal();
        }

      });

      scope.close = function() {
        scope.modalOpen = false;
      }
    }
  }
}

Answer 2

Have you achieved your desired outcome with this solution? I enclosed the content of your template within a single div for ease of accessing the entire chunk as one variable. Subsequently, I included and excluded that div based on whether you wish to display or hide it.

It seems impossible to eliminate the <ng-modal> element completely, but at least everything inside it can be removed...

Check out the demo here

html

<div>
  <div class="modal hide">
    <h4>{{modalContent.title}}</h4>
    <p>{{modalContent.text}}</p>
    <button ng-click="close()">Close Modal</button>
  </div>

  <div class="modal-overlay"></div>
</div>

js

var ModalDirective = function() {
  return {
    restirct: 'E',
    templateUrl: 'modal.html',
    scope: {
      modalContent: "=",
      modalOpen: "="
    },
    link: function(scope, element, attrs) {
      var modalElements = element.children()[0];
      console.log(element);

      function addModal() {
        console.log('Opening modal');
        element.addClass('open');
        //add the modal elements back into the directive
        if (modalElements) {
          //should be 0
          console.log('Element child count before add', element.children().length);
          element[0].appendChild(modalElements);
           //should be 1
           console.log('Element child count after add', element.children().length);
        }
      }

      function removeModal() {
        element.removeClass('open');
        console.log('Closing modal');
        if (modalElements) {
          //remove the modal elements from the directive
           //should be 1
          console.log('Element child count before remove', element.children().length);
          element[0].removeChild(modalElements);
          //should be 0
          console.log('Element child count after remove', element.children().length);
        }
      }

      scope.$watch('modalOpen', function(newVal, oldVal) {

        if (newVal) {
          addModal();
        } else {
          removeModal();
        }

      });

      scope.close = function() {
        scope.modalOpen = false;
      }
    }
  }
}

Answer 3

Answer №2

Using jquery method:

$(element).remove()

Without relying on jquery library:

element.html("")
element.remove();
element.empty();

Answer 4

Using jquery method:

$(element).remove()

Without relying on jquery library:

element.html("")
element.remove();
element.empty();

Creating a dynamic directive in AngularJS: Learn how to add or remove it from the DOM based on specific conditions

EDIT:

Answer №1

Answer №2

Similar questions

Data merging in Firebase 9 and Vue 3 is not functioning properly

Tips for accessing and displaying JSON data using jQuery

Guide on utilizing personalized fonts with Handlebars and Puppeteer

What is the best way to trigger an event from a child component to a parent component in

How come executing a function in the Node.js REPL using )( actually functions?

Uploading video files using XMLHttpRequest encountered an error on a particular Android device

What is the best way to retrieve a complete DynamoDB scan response using aws-sdk-js-v3 without object types included in the marshaled response?

The Value of Kendo Data

A guide to reordering table rows by drag-and-drop with JavaScript

The icon in Material UI button is missing from the display

What is the best way to reset an HTML file input using JavaScript?

Angular SPA Routing for .Net Core 2.0

Facing an issue with sending data in AJAX Post request to Django View

The data binding feature in this Angular web application is malfunctioning

Using jQuery to Capture Datepicker Input and Assigning to PHP Variable

Switches in a React-Native ListView are not refreshing properly

Tips for accessing raw POST data in PHP using $_SERVER

Changing the Direction of News Ticker Movement from Right to Left

Creating key elements in JavaScript with the push() function

Angular2 - Error: The view has been destroyed and cannot be updated: detectChanges