Retrieving DOM elements within a directive once ng-if has finished compilation

Question

Retrieving DOM elements within a directive once ng-if has finished compilation

I am currently working on creating a dynamic side navigation menu that will populate its items based on the state of the DOM, specifically the <section> elements in my document.

The challenge I am facing is that I have applied some ng-if directives to certain <section> elements, and these directives are dependent on scope variables that are fetched via AJAX using $http.get. As a result, when the directive is compiled or linked, these scope variables have not yet been retrieved and the ng-if conditions are unstable as they evaluate as if the variables are undefined.

Main HTML

<my-sidenav></my-sidenav>

<!-- Various other content and structure -->

<section id="foo1" class="sidenav-item">...</section>
<section id="foo2" class="sidenav-item">...</section>
<section id="foo3" class="sidenav-item" ng-if="fooVar1 === fooVar2">...</section>
<section id="foo4" class="sidenav-item">...</section>
<section id="foo5" class="sidenav-item" ng-if="fooVar3 !== fooVar4">...</section>

Sidenav HTML

<div>
    <a ng-repeat="section in ctrl.sections track by section" href="#" ng-click="ctrl.scrollTo(section)">{{section}}</a>
</div>

Directive Definition

function mySidenav() {
    return {
        templateUrl: 'sidenav.html',
        controller: function() {
            var ctrl = this;

            // Once template URL is linked
            // !!! ng-if still not stable !!!
            ctrl.$postLink = function() {
                // Convert nodeList to array for easier manipulation
                var nodeList = document.querySelectorAll('.sidenav-item');
                var nodeArray = Array.prototype.slice.call(nodeList);

                // Extract section id
                ctrl.sections = nodeArray.map(function(el) {return el.id;});
            };

            ctrl.scrollTo = /*...*/
        },
        controllerAs: 'ctrl'
    };
}

Is there a preferred method to access DOM elements on the page only after the ng-if expressions have stabilized? I was considering using $timeout, but I'm unsure of what would be a safe delay value.

Alternatively, could I utilize $watch? Is there a way to ensure that ctrl.sections dynamically updates?

javascript angularjs dom angularjs-directive angularjs-ng-if

Answer 1

Answer №1

After implementing $watchCollection successfully, I plan to leave this question open for potential feedback on alternative solutions.

I made adjustments to the directive definition as shown below:

function customSidenav() {
    return {
        templateUrl: '/custom/resources/html/sidenav.html',
        controller: ['$rootScope', function($rootScope) {
            var ctrl = this;

            $rootScope.$watchCollection(
                function(scope) {
                    return fetchSections();
                },
                function(newValue, oldValue, scope) {
                    ctrl.sections = newValue;
                }
            );

            ctrl.scrollTo = /*...*/;

            function fetchSections() {
                // Optimal method for retrieving IDs
                var ids = [];

                var nodeList = document.querySelectorAll('.sidenav-item');
                for (var i = 0; i < nodeList.length; i++) {
                    ids.push(nodeList[i].id);
                }

                return ids;
            }
        }],
        controllerAs: 'ctrl'
    };
}

Answer 2

After implementing $watchCollection successfully, I plan to leave this question open for potential feedback on alternative solutions.

I made adjustments to the directive definition as shown below:

function customSidenav() {
    return {
        templateUrl: '/custom/resources/html/sidenav.html',
        controller: ['$rootScope', function($rootScope) {
            var ctrl = this;

            $rootScope.$watchCollection(
                function(scope) {
                    return fetchSections();
                },
                function(newValue, oldValue, scope) {
                    ctrl.sections = newValue;
                }
            );

            ctrl.scrollTo = /*...*/;

            function fetchSections() {
                // Optimal method for retrieving IDs
                var ids = [];

                var nodeList = document.querySelectorAll('.sidenav-item');
                for (var i = 0; i < nodeList.length; i++) {
                    ids.push(nodeList[i].id);
                }

                return ids;
            }
        }],
        controllerAs: 'ctrl'
    };
}

Answer 3

Answer №2

To implement the link function, follow these steps:

function mySidenav() {
    return {
        templateUrl: 'sidenav.html',
        link: function(scope, elm) {
                // Transform nodeList into an array for easier handling
                var nodeList = document.querySelectorAll('.sidenav-item');
                var nodeArray = Array.prototype.slice.call(nodeList);
                var sections = nodeArray.map(function(el) {return el.id;});   
        }
    };
}

Check out this CodePen example for reference.

Answer 4

To implement the link function, follow these steps:

function mySidenav() {
    return {
        templateUrl: 'sidenav.html',
        link: function(scope, elm) {
                // Transform nodeList into an array for easier handling
                var nodeList = document.querySelectorAll('.sidenav-item');
                var nodeArray = Array.prototype.slice.call(nodeList);
                var sections = nodeArray.map(function(el) {return el.id;});   
        }
    };
}

Check out this CodePen example for reference.

Retrieving DOM elements within a directive once ng-if has finished compilation

Main HTML

Sidenav HTML

Directive Definition

Answer №1

Answer №2

Similar questions

Parameterized Azure Cosmos DB Stored Procedure

Client requests are not being responded to by the server

The 'async' keyword is not permitted in this context within a TypeScript React application

Design a recurring report using an endless JavaScript cycle

Utilizing Grunt to streamline a personalized project

Using a uibCollapse within a nested directive element may not function as expected

Refresh your HTML page automatically while keeping the scroll position and functioning with anchors

Can a personalized form be dynamically modified in Camunda BPM without the need for redeployment?

What is the best way to extract the selected text from a dropdown list using Kendo UI jQuery?

Error message: When the mouse hovers over, display the chart(.js) results in TypeError: t is

Is there a way for me to convert my HTML code into a Vue component?

Is there an alternative method to including a PHP file from a remote server other than using the "<?php include(); ?>" syntax?

The array is coming back empty after attempting to add objects to it

The issue of an undefined value being returned for a dynamic id in jQuery within a

Issue: The type does not have any compatible call signatures, therefore cannot be invoked. Error message: 'Cannot invoke an expression whose type lacks a call

The $rootScope object cannot be accessed in the controller

Issue with jQuery click event not triggering on dynamically created input boxes for removal

Is there a way to hide the tooltip displaying the most recent dates in Bootstrap?

The date picker functionality provided by ngMaterial is currently malfunctioning within an AngularJS environment

Creating a dropdown menu in React using the React.createElement() function