Embed array inside angular directive

Question

Embed array inside angular directive

In my angular application, I have a code snippet that generates a navigation tree within a <div>. The size of this tree depends on the contents of mymodule.tree.folders. To enhance this functionality, I want to create a directive named class="scrollable", which will integrate the features of jquery.nicescroll into the surrounding <div>:

<div class="scrollable">
    ... the dynamically resizing tree goes here ...
</div>

To ensure proper functioning of the library even after changes in the content size, I need to call the resize() function of nicescroll whenever the model mymodule.tree.folders is updated. My query is: How can I incorporate the array mymodule.tree.folders into my directive for monitoring using $watch()? I wish to include it like so:

<div class="scrollable" scrollable-watch="mymodule.tree.folders">
    ... the dynamic tree content goes here ...
</div>

Is it possible to directly access this model from the template's scope, or do I need to store the entire tree data separately?

javascript angularjs angularjs-directive angularjs-scope

Answer 1

Answer №1

I discovered a clever method to tap into the model using the $parent scope:

'use strict';

angular.module('shared.directives.scrollable', []);

angular.module('shared.directives.scrollable').directive('scrollable', function() {

    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            scope.$watch('$parent.' + attrs.scrollableWatch, function(newValue, oldValue) {
                console.log('Model updated!');
            }, true);
        }
    };
});

While it may seem unconventional to access the parent scope in this way, since it is always the calling scope, I believe it is acceptable.

Answer 2

I discovered a clever method to tap into the model using the $parent scope:

'use strict';

angular.module('shared.directives.scrollable', []);

angular.module('shared.directives.scrollable').directive('scrollable', function() {

    return {
        restrict: 'C',
        link: function(scope, element, attrs) {
            scope.$watch('$parent.' + attrs.scrollableWatch, function(newValue, oldValue) {
                console.log('Model updated!');
            }, true);
        }
    };
});

While it may seem unconventional to access the parent scope in this way, since it is always the calling scope, I believe it is acceptable.

Embed array inside angular directive

Answer №1

Similar questions

converting JSON to date format in angular

Dynamic change in the mutation observer is not causing the callback to trigger

Why do we use ng-* instead of data-ng-* in Angular?

Leverage socket.io in various routes within a node.js application

Guide on excluding certain words within a paragraph using PHP

Is there a way I can link a variable to a URL for an image?

Enhancing Directives in Angular

What is the process for incorporating synchronous tasks within an asynchronous function?

Transforming a unirest 'GET' call into an axios request

Guide on converting JSON encoded data into a JavaScript array

The art of breathing life into UpdatePanels

Combining Arrays in AngularJS with an owl-carousel Setting

Generate a dynamic HTML table using an array of objects

Postman post request failing to insert Mongoose model keys

Is there a way to change the domain for all relative URLs on an HTML page to a different one that is not its current domain, including in HTML elements and JavaScript HTTP Requests?

When working with React and trying to update data using the useEffect hook, I encountered an issue with an Array data. Unfortunately, using map or Object.keys(data).map did not produce the desired results. Can anyone provide guidance on

The v-select menu in Vuetify conceals the text-field input

Two DataTables on a Single Page - Odd Initialization in the Second One

What is the best way to add child elements to existing elements?

ng-class not functioning properly even after variable toggling completed