Server requests in Angular Directive?

Question

I am going to write a Angular Custom Directive

• Directive work is to display the User details in template

PROPOSSED BY MY LEAD

• This directive going to used in more than 5 places

• His suggestion was instead making 5 times server requests in different controllers why cannot we do it in directive by passing resource-url as input to directive

index.html

    <users-list resource-url="getUsersList"></user-list>

Script :

    .directive(usersList, function ($http) {
       return {
          restrict :'E',
          scope : {
              resourceUrl : '@' 
                  },
          templateUrl : "someTemplate.html",
          link : function (scope, ele, attr) {
               $http.get(scope.resourceUrl).success(function (list) {
                 scope.users = list;
              });
            } 
        };        
     });

someTemplate.html

     <div ng-repeat="user in users">{{user.name}}</div>

MY OBSERVATOIN

• Most of the directive takes actual response from Server Request in parent controller that response will be input to the directive

like

   <users-list list="usersList"></users-list>

• So that directive receives users like below

   directive('usersList' , function () {
   return {
       scope : { 
           users : '=list'
       },
       templateUrl : someTemplate.html
    }
   });
  

• Iterates the users in someTemplate.html

QUESTION

Is it good idea to write server requests in directive itself?

Answer 1

This might be a good idea but in my opinion it's not good practise for angularjs.

You should wrap your request in your angularjs service(factory) and then inject your service to your directive to make http call , also you can give resource url for your service via directive with an html attribute on your element.