javascript - AngularJS 中多个指令的一个声明

Question

我正在为所有 h1-h6 元素创建自定义指令。所有指令主体都是相同的:它们为 h-element 设置随机颜色。

这是我的工作代码 - 丑陋且干燥

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

有很多方法可以解决这个问题，毕竟它只是 JavaScript...

Array foreach 是一种选择，您还可以查看 Angular Core，它实际上做了一些事情来最小化样板文件。

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