Exploring the power of recursion within Angular directives and templates

Question

Exploring the power of recursion within Angular directives and templates

While attempting to create a custom directive for displaying a tree structure, I encountered a strange issue. It appears that including the directive in its own template causes chaos in the angular compiler, leading to the browser process getting stuck in a loop. For reference, here is the code snippet:

<li class="list-group-item">
<a ng-click="clicked(item)"><span ng-if="item.items" class="glyphicon glyphicon-plus text-primary"></span></a>
<span ng-if="!item.items" class="glyphicon glyphicon-record text-primary"></span>
<a>{{item.name}}</a>
<div ng-if="item.items && item.items.length>0">
    <ul class="list-group"> 
        <taxonomy-item ng-if="item.items && item.items.length>0" ng-repeat="child in item.items"></taxonomy-item>
    </ul>
</div>

This issue is not related to data binding, as it doesn't bind any data, suggesting it's an error with the compiler rather than the model or data...

http://plnkr.co/edit/1aollcuCr2gA96W6Sk6q

Warning: Running this code may cause your browser tab to freeze!

Does anyone have suggestions on how to resolve this problem?

javascript angularjs

Answer 1

Answer №1

One simple solution is to use the link function in Angular when you cannot use directives within themselves. This way, you can add the child directive afterwards. Here's a basic example:

myApp.directive("myDirective", ["$compile",function($compile){

    var template = '<my-directive ng-repeat="child in item.items" ng-model="child"></my-directive>';

    return{
        templateUrl: "myDirective.html",
        replace: true,
        transclude: true,
        scope: {
            item: "=ngModel"    
        },
        link: function(scope, element){                     
            var compiled = $compile(template)(scope);
            element.append(compiled);
        }
    }   
}]);

With this approach, there should be no issues as the compiled child directive is self-contained and added afterwards.

Answer 2

One simple solution is to use the link function in Angular when you cannot use directives within themselves. This way, you can add the child directive afterwards. Here's a basic example:

myApp.directive("myDirective", ["$compile",function($compile){

    var template = '<my-directive ng-repeat="child in item.items" ng-model="child"></my-directive>';

    return{
        templateUrl: "myDirective.html",
        replace: true,
        transclude: true,
        scope: {
            item: "=ngModel"    
        },
        link: function(scope, element){                     
            var compiled = $compile(template)(scope);
            element.append(compiled);
        }
    }   
}]);

With this approach, there should be no issues as the compiled child directive is self-contained and added afterwards.

Exploring the power of recursion within Angular directives and templates

Answer №1

Similar questions

When you refresh the page, the number of items in the cart displayed on the navbar always shows 0

Selecting items using raycasting

Accepting insecure certificates in Chrome with Selenium-Webdriver in JavaScript: A Step-by-Step Guide

Why isn't res.send() in Node.js sending the message?

Continuously replicate SVG horizontally without limit

Issue with modal not being able to close the embedded video iframe

The use of the keyword 'await' was not anticipated

Exploring Angular: How does Number.isNaN handle non-empty strings?

Leveraging symbols as object key type in TypeScript

Exiting shell sessions may involve NPM, Supervisor, and Nohup

Angular 7: Resetting multiple dynamically generated checkboxes back to their original state with the click of a button

How to navigate to two different controllers on separate pages within the same module using AngularJS

Backbone sorting is specifically designed for organizing views within the framework

Update the table with information from a designated URL every 5 seconds

tips for dynamically highlighting search bar after choosing a different dropdown option - vuejs

Why am I struggling to properly install React?

Is there an alternative module available for running Express APIs from Azure V4 functions, besides the "azure-aws-serverless-express" module?

"Exploring the capabilities of Rxjs ReplaySubject and its usage with the

What are the steps to activate CORS in a MEAN STACK web application?

Incorporate an image into your webpage with the Fetch API by specifying the image link - JavaScript