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

你试过这样的东西吗？

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

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

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

Answer 2

有很多解决方法，毕竟只是 JavaScript...

Array foreach 是一种选择，您还可以查看 angular 核心，其中实际做了一些事情来最小化样板文件。

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

AngularJS 中多个指令的一个声明

One declaration for multiple directives in AngularJS

javascript

angularjs

angularjs-directive