How to Add Directives from a Parent Directive in AngularJS Without Infinite Loops?

Adding Directives from a Parent Directive in AngularJS

In AngularJS, one may encounter the need to add additional directives to an element that is already equipped with a parent directive. While the $compile service offers the means to achieve this, it is crucial to avoid infinite loops.

To prevent this issue, it is advisable to examine whether the required attributes have already been appended to the element. However, when utilizing $compile to update the element, the directives would not be initialized.

Is this Approach Appropriate?

The aforementioned approach is generally valid; however, adjustments may be necessary to ensure proper functionality.

Alternative Method

An alternative solution involves leveraging the priority property to sequence the application of directives on a single element. Directives with higher priority values are executed first. By assigning a high priority to the parent directive, it can ensure that its initialization precedes that of child directives.

Tweaking the Directive

Based on the discussion, the following revised version of the directive provides a workable solution.

<code class="javascript">angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true, // Prevent subsequent directives from executing
      priority: 1000, // Assign a high priority for early execution
      compile: function compile(element, attrs) {
        // Add additional attributes
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');

        // Remove the parent directive attribute to avoid looping
        element.removeAttr('common-things');
        element.removeAttr('data-common-things');

        return {
          pre: function preLink(scope, iElement, iAttrs, controller) { },
          post: function postLink(scope, iElement, iAttrs, controller) {
            $compile(iElement)(scope);
          },
        };
      },
    };
  });</code>

This updated directive effectively adds the desired attributes while preventing infinite loops. It utilizes the terminal property to halt the execution of subsequent directives, ensuring that they are applied after the child directives have been initialized.

The above is the detailed content of How to Add Directives from a Parent Directive in AngularJS Without Infinite Loops?. For more information, please follow other related articles on the PHP Chinese website!