Everettss Everettss - 6 months ago 28
Javascript Question

One declaration for multiple directives in AngularJS

I'm creating custom directive for all

h1-h6
elements. All directives body are the same: they set random color for
h-element
.

Here is my working code - ugly and DRY

angular.module('example', []);

angular.module('example').factory('randomColor', function () {
return function () {
var colors = ['#FF6A88', '#39FF82', '#7AD5D5', '#DFAF01'];
var randomPick = parseInt(Math.random() * colors.length);
return colors[randomPick];
};
});


angular.module('example').directive('h1',['randomColor', function (randomColor) {
return {
restrict: 'E',
link: function (scope, element) {
$(element).css({ color: randomColor() });
}
};
}]);

angular.module('example').directive('h2',['randomColor', function (randomColor) {
return {
restrict: 'E',
link: function (scope, element) {
$(element).css({ color: randomColor() });
}
};
}]);

//the same for h3-h6


You can check this code here: Plunker - DRY version

Is possible to achieve something like this?

angular.module('example').directive(['h1','h2','h3','h4','h5','h6'],['randomColor', function (randomColor) {
return {
restrict: 'E',
link: function (scope, element) {
$(element).css({ color: randomColor() });
}
};
}]);

Answer

Theres many ways around it, it's just JavaScript after all...

Array foreach would be one option, you can also look to the angular core where actually does something to minimize the boilerplate.

var mod = angular.module('example');
['h1','h2','h3', 'h4','h5','h6'].forEach(function(tag) {
mod.directive(tag,[ 'randomColor', function(randomColor) {
  return {
    restrict: 'E',
    link: function (scope, element) {
      //Note: for angular 1.x element is already a JQuery or JQLite object, 
      // so no need for hte $() wrapping here. 
      // You need to load JQuery before angular 
      // for it to be a full JQuery object.
      element.css({color: randomColor()});
    }
  };
}]);
});