Exploring the concepts of AngularJS directives and resources

Question

Exploring the concepts of AngularJS directives and resources

I've been experimenting with angularjs and rest service calls to display specific data sets, but I'm encountering challenges with custom directives and resources.

Currently, I have a custom directive that loads a list of comments in an application. This list is loaded through a resource call and displayed using the directive on Page A.

On Page B, I display information about a single user through a URL like site.com/user/3 - this user data is fetched from a REST resource and displayed successfully as the page model.

My goal is to integrate the comments directive onto the user's page so that it shows a list of comments specific to that user. I assumed I could somehow pass the user as a filter to the directive for displaying comments.

However, this approach doesn't seem to work as expected. It appears that the directive is executed before the user data promise is fulfilled, resulting in unfiltered comments being displayed.

In essence, how can I ensure that my directive loads the filtered comments only after the user data has been completely loaded?

Just to clarify, when I mention users and comments, it's for illustrative purposes. The actual data is more domain-specific, but the concept remains the same. I haven't included any code intentionally because I want to focus on understanding the correct methodology rather than troubleshooting specific code issues.

javascript angularjs

Answer 1

Answer №1

Personally, I'm not a big fan of strict rules, but here's how I see it:

When it comes to directives, they should mainly focus on DOM manipulation and presentation. It's best to keep them as self-contained, reusable components. For example, your directive should be responsible for displaying a list of comments on the UI.
Tasks such as interacting with the server, filtering comments, etc. are better handled by a service that your directive depends on. In your scenario, you could have a method in the service called getUserComments = function(userID) which fetches the user's comments. The directive then uses this data to update its portion of the DOM.

This is what the structure would look like:

angular.service('CommentService',
    function($http, $q){

        this.getUserComments = function(userID){

            var deferred = $q.defer();

            $http.get('site.com/user/' + userID).
                success(function(comments) {

                   deferred.resolve(comments)

                }).
                error(function(data, status) {

                   deferred.reject(status);

                });

            return deferred.promise;
        };

    }
); // End CommentService

angular.directive('commentList',
   function(CommentService){

      return {
         restrict : 'EA',
         template : '<ul><li ng-repeat="comment in comments">{{comment.text}}</li></ul>',
         scope : true,
         replace : true,
         link : function(scope, elem, attrs){

             // get User ID from somewhere
             var userID = 3;
             CommentService.getUserComments(userID).then(
                 function(comments){
                    scope.comments = comments;
                 }
             );

         }  
      }
   }
);

Hopefully, this explanation clears things up!

Answer 2

Personally, I'm not a big fan of strict rules, but here's how I see it:

When it comes to directives, they should mainly focus on DOM manipulation and presentation. It's best to keep them as self-contained, reusable components. For example, your directive should be responsible for displaying a list of comments on the UI.
Tasks such as interacting with the server, filtering comments, etc. are better handled by a service that your directive depends on. In your scenario, you could have a method in the service called getUserComments = function(userID) which fetches the user's comments. The directive then uses this data to update its portion of the DOM.

This is what the structure would look like:

angular.service('CommentService',
    function($http, $q){

        this.getUserComments = function(userID){

            var deferred = $q.defer();

            $http.get('site.com/user/' + userID).
                success(function(comments) {

                   deferred.resolve(comments)

                }).
                error(function(data, status) {

                   deferred.reject(status);

                });

            return deferred.promise;
        };

    }
); // End CommentService

angular.directive('commentList',
   function(CommentService){

      return {
         restrict : 'EA',
         template : '<ul><li ng-repeat="comment in comments">{{comment.text}}</li></ul>',
         scope : true,
         replace : true,
         link : function(scope, elem, attrs){

             // get User ID from somewhere
             var userID = 3;
             CommentService.getUserComments(userID).then(
                 function(comments){
                    scope.comments = comments;
                 }
             );

         }  
      }
   }
);

Hopefully, this explanation clears things up!

Exploring the concepts of AngularJS directives and resources

Answer №1

Similar questions

Storing user credentials in Firestore after registration - best practices

Optimal strategy for creating a kiosk application that features dynamically changing views based on a timer

Sinon.stub functions as expected in karma and mocha when using Chrome, however it encounters issues when running in head

Is it considered poor form for an Angular controller to invoke a function on a directive?

There are a few steps to take in order to sort an array of objects by a

Troubles encountered with adapting apexcharts size within a react environment

Error: Attempting to append a child to a non-existent property

Issue with Bootstrap Carousel Interval Setting not Functioning as Expected

Modifying SASS variable values based on the presence of specific text in the page URL

One of the two identical pages is experiencing issues with the jQuery leanmodal while the other is

extract values from a JavaScript function on a website

Enhance JSON nesting with knockoutJS

What is the process of obtaining User properties through a URL and utilizing them as variables in JavaScript?

Is the removal of the Vue-Router link happening when you click on the top app bar icon in Google Material

AngularJS allows for filtering unique values per key and retrieving only the checked items

The largest allowable call stack size within jQuery version 1.9.0

I am looking to modify the file name in the save as dialog box whenever the user performs a right-click

OnsenUI: driving engagement with push notifications

Adding several lines of HTML content from an object using jQuery's append method

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?