Angular directive that repeats nested directives should only pass if the parent directive is the last one

Question

Angular directive that repeats nested directives should only pass if the parent directive is the last one

I need to trigger an event once all the iterations in this nested loop are completed. While I can use $last to check for the last iteration, I am unable to determine within the inner loop if it is at the $last iteration of the parent loop. Here's what I have:

<div>
    <div ng-repeat="filter in filters.filters" repeat-directive-one filter="filter" update-filter="updateFilter">
</div>
</div>

Inside the repeat-directive-one looks like this:

<div ng-repeat="item in filter.values | limitTo: filter.showMore ? filter.values.length : '5' track by $index" repeat-directive-two value="::item" update-filter="updateFilter" ng-if="!$last"></div>

<div ng-repeat="item in filter.values | limitTo: filter.showMore ? filter.values.length : '5' track by $index" repeat-directive-two value="::item" update-filter="updateFilter" ng-if="$last" checkbox-fix></div>

This setup adds the checkbox-fix directive when it reaches the last item of the inner loop. However, this fires multiple times if the outer loop has fewer items than the inner one. I would like something like:

ng-if="$last && parent.$last"

But this logic doesn't seem to work as expected. I also tried passing the parent $last boolean as a isolated scope attribute (in repeat directive one):

<div ng-repeat="filter in filters.filters" repeat-directive-one filter="filter" update-filter="updateFilter" last-property="$last">

However, logging $scope.lastProperty returns nothing. Is there a way to pass down a flag indicating that the parent loop is at its $last iteration? Any suggestions would be appreciated. Thank you!

javascript angularjs

Answer 1

Answer №1

In order to signal when the outer loop is finished and trigger the final iteration of the inner loop, you can implement something similar to this:

<div ng-repeat="stuff in stuffs" outer-loop>
    <div ng-repeat="item in items" inner-loop></div>
</div>


angular.module('test').directive('outerLoop', function($rootScope){
    return function(scope, element, attrs) {
        if (scope.$last){
            $rootScope.$broadcast('outerLoopComplete');
        }   
    };
});

angular.module('test').directive('innerLoop', function(){
    return function(scope, element, attrs) {
        var outerLoopComplete = false;

        scope.$on('outerLoopComplete', function(){
            outerLoopComplete = true;
        });

        if(outerLoopComplete && $last){
            //inner loop complete
        }
    };
});

Answer 2

In order to signal when the outer loop is finished and trigger the final iteration of the inner loop, you can implement something similar to this:

<div ng-repeat="stuff in stuffs" outer-loop>
    <div ng-repeat="item in items" inner-loop></div>
</div>


angular.module('test').directive('outerLoop', function($rootScope){
    return function(scope, element, attrs) {
        if (scope.$last){
            $rootScope.$broadcast('outerLoopComplete');
        }   
    };
});

angular.module('test').directive('innerLoop', function(){
    return function(scope, element, attrs) {
        var outerLoopComplete = false;

        scope.$on('outerLoopComplete', function(){
            outerLoopComplete = true;
        });

        if(outerLoopComplete && $last){
            //inner loop complete
        }
    };
});

Answer 3

Answer №2

With guidance from @trevor, I managed to solve the issue in the following way:

<div ng-repeat="item in filter.values | limitTo: filter.showMore ? filter.values.length : '5' track by $index" repeat-directive-two value="::item" update-filter="updateFilter" checkbox-fix></div>

I attached the checkbox-fix to the repeat directive (eliminating the need for 2 toggles using ng-if), and within the checkbox-fix directive, I implemented the following:

 return {
        restrict: 'A',
        link: function(elem, attr, tr) {
           if(elem.$parent.$parent.$last && elem.$last){
                //issue resolved!
           }
        }
    };

The use of elem.$last was successful, although I had to examine the data/structure more closely to understand that I needed to use elem.$parent.$parent.$last instead of just one level of parent.

Answer 4

With guidance from @trevor, I managed to solve the issue in the following way:

<div ng-repeat="item in filter.values | limitTo: filter.showMore ? filter.values.length : '5' track by $index" repeat-directive-two value="::item" update-filter="updateFilter" checkbox-fix></div>

I attached the checkbox-fix to the repeat directive (eliminating the need for 2 toggles using ng-if), and within the checkbox-fix directive, I implemented the following:

 return {
        restrict: 'A',
        link: function(elem, attr, tr) {
           if(elem.$parent.$parent.$last && elem.$last){
                //issue resolved!
           }
        }
    };

The use of elem.$last was successful, although I had to examine the data/structure more closely to understand that I needed to use elem.$parent.$parent.$last instead of just one level of parent.

Answer 5

Answer №3

Learn more about ngInit directive here

Utilize ngInit to assign the value of $last to a scope variable, enabling direct and indirect access to this variable from the child scope, particularly in cases involving isolate scope.

Answer 6

Learn more about ngInit directive here

Utilize ngInit to assign the value of $last to a scope variable, enabling direct and indirect access to this variable from the child scope, particularly in cases involving isolate scope.

Angular directive that repeats nested directives should only pass if the parent directive is the last one

Answer №1

Answer №2

Answer №3

Similar questions

Leveraging both onmouseover and onmouseout for container expansion

Running a JS/JSON function in Snowflake that results in a syntax error

Activate real-time highlighting by clicking on the search button

Sending Email Form in PHP using JQuery and Ajax for seamless user experience

Separating unique values in an array of objects and storing the rest of the values in a separate

AngularJS secureHTML verify image click event

Having trouble with npm install, unable to successfully install any node modules after cloning my project from git

What is the best way to handle an OR scenario in Playwright?

Using Node.js to send a photo through a Telegram Bot

Using AngularJS to dynamically update the DOM with the response from a service method

Is there a way for me to retrieve a variable from within a .then function nested within another .then function?

An unexpected glitch causes Parse server to crash

Nesting ng-repeat within another ng-repeat for dynamic content generation

Multiplication cannot be performed on operands of type 'NoneType'

Convert a pandas dataframe into a JSON object with nested structures

Google Maps API - Custom Label for Map Markers

The module './installers/setupEvents' could not be located within Electron-Winstaller

Obtaining a value from within an Angular 'then' block

How can we determine if a Node.js application will remain operational?

What's the reason behind this file not opening?