AngularJs directive and $http calls

Question

I have created a angular multiselect directive plugin. The directive takes an array as an input. The idea is to use this plugin in all for the present and future projects if needed. The array needs to be in the following format :

[
    { id: 1, name: 'Theme1', selected: false },
    { id: 2, name: 'Theme2', selected: false },
    { id: 3, name: 'Theme3', selected: false },
    { id: 4, name: 'Theme4', selected: false },
    { id: 5, name: 'Theme5', selected: false },
    { id: 6, name: 'Theme6', selected: false },
    { id: 7, name: 'Theme7', selected: false },
    { id: 8, name: 'Theme8', selected: false },
    { id: 9, name: 'Theme9', selected: false },
    { id: 10, name: 'Theme10', selected: false }
]

The directive takes the above input and converts to this [image url] :

http://pho.to/7wl3E

Now my colleague argues that , the directive will always have to be passed the above format, which is not fisible. He then goes on to suggest the directive have to make an API $http request to get the data from server , use the data returned to create the necessary format. He also insists to handle both pre-formatted data and $http calls in directive.

I debate back that angular directives are not made for this purpose and there involves lot of things if use $http calls inside directive like API URL, method [GET,POST], payload data for post, needs to be passed to directive, weather to preload the data for dropdown or not.

So pertaining to this scenario, here's my questions

1. Is $http calls a good practice to use inside custom directives?
2. The suggestion given by my colleague to have both pre-formatted data and $http calls in directive. Is it good practice?
3. If point 2 is not a good practice , any suggestions or ideas on this scenario so that i can convience my colleague?

Answer 1

Many times directives that require some logic (specially server logic) are separated into a directive and a service.

To answer the questions:

• is $http call a good practice to use in a directive?

  • It can be, imagine a directive that you need to get some piece from the server before it can act, but it only needs it once, then it's a good idea to have the call made once, and the value cached for all other instances of the directive.

    But if you need some custom http call per directive, then I think a service is a better way to go.

• In that case, that each directive can have some kind of data returned from server, I'd argue that a bundled service for the directive is a better approach. and then extending that logic will be easier and in a better place.

• See above :)

Bundled Service with a directive:

angular.module('app',[]).service('MultiSelect', ['$http', function($http) {
      this.getMyData = function() {
          $http.get('....');
      };
});
angular.module('app',[]).directive('multieSelect', ['MultiSelect', function(selectService) {
        return {
            link: function($scope, $el, $attr) {
                 $scope.selectData = selectService.getMeMyData();
            }
        }
});

This way you have two separate entities, one that is instantiated many times where it's needed, and one singleton that is only responsible for the logic. iirc angular-strap uses this approach, for many of their directives.

I hope that helps.

Answer 2

I think most of your questions were answered but I can make a suggestion. Just send in the formatted JSON from your controller. What I generally do for a control like this is instead of requiring a specific format you could add a scope variable of displayProperty and keyProperty. In your case it would be id and name then reference it like yourArray[displayProperty] and yourArray[keyProperty]

Answer 3

1. Is $http calls a good practice to use inside custom directives?

Depends on whether the directive is a standalone feature or not. (Lets say you're creating a directive that nurture itself and doesn't really play ball with anything else).

I would argue that $http calls should only be made in services and then injected into the controller (with bindings neccesary for the data to reach the directive) - or into the directive if you really have to.

However, keeping your $http requests to services promotes reusability.

2. The suggestion given by my colleague to have both pre-formatted data and $http calls in directive. Is it good practice?

See previous answer.

3. If point 2 is not a good practice , any suggestions or ideas on this scenario so that i can convience my colleague?

I would advice you both to look through one of the major styleguides made available by the Angular JS community. One being http://toddmotto.com/opinionated-angular-js-styleguide-for-teams/ .

Angular codingstyles are largely oppinionated and there's a lot ways to do it where some of them are better.