Одно объявление для нескольких директив в AngularJS

Question

Я создаю специальную директиву для всех элементов h1-h6. Все директивы тела одинаковы: они устанавливают случайный цвет для h-element.

Вот мой рабочий код - некрасиво и 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 

Вы можете проверить этот код здесь: Plunker - DRY version

можно добиться что-то вроде этого?

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 1

Theres много способов вокруг него, это просто JavaScript в конце концов ...

Массив Еогеасп будет один вариант, вы можете также обратиться к угловому ядра, где на самом деле делает что-то, чтобы свести к минимуму шаблонного.

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()}); 
    } 
    }; 
}]); 
}); 

Answer 2

Вы пробовали что-то вроде этого?

var app = angular.module('example', []); 

var fn = function(randomColor) {...}; 

app.directive('h1', ['randomColor', fn]); 
app.directive('h2', ['randomColor', fn]); 
... 

Answer 3

var mod=angular.module('example', []); 

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

       return colors[randomPick]; 
      }; 
}); 

var headerDirective=[ 'randomColor', function(randomColor) { 
    return { 
    restrict: 'E', 
    link: function (scope, element) { 
     $(element).css({color: randomColor()}); 
    } 
    }; 
}]; 

['h1','h2','h3', 'h4','h5','h6'].forEach(function(tag) { 
     mod.directive(tag,headerDirective); 
});