Question

我有一堆Angular指令看起来都一样，比如（更复杂的版本）

app.directive('note', function () {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div class="' + 'note' + '"></div>
    }
});

将note替换为许多其他内容。我想在循环中定义它们以保持DRY。我试过了

var dirs = ['note', 'introduction', 'thing'];

for (var dir, i = 0; dir = dirs[i]; i++) {
    app.directive(dir, function () { ... });
}

无济于事。有没有办法做到这一点？

Answer 1

我认为你不应该这样做。您应该将值传递给指令。但是，如果您真的觉得需要这样做，它确实可以正常工作：fiddle。

HTML：

    <div ng-app="myApp">

        <div ng-controller="MyCtrl">
          Hello, {{name}}!
        </div>
        <introduction> </introduction>
        <note></note>
        <thing></thing>
        <notAThing></notAThing>
    </div>

JS：

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

    var dirs = ['note', 'introduction', 'thing'];

    angular.forEach(dirs, function(dir) {
        myApp.directive(dir, function() {
            return {
                restrict: 'E',
                transclude: true,
                template: '<div class="' + dir + '">something</div>'
            }
        });
    });

Answer 2

我必须说这可能是我说话的那个菜鸟但如果你知道自己在做什么，我真的不会发现这个问题：

(function() {
  var createDirective, module, pluginName, _i, _len, _ref;

  module = angular.module('FacebookPluginDirectives', []);

  createDirective = function(name) {
    return module.directive(name, function() {
      return {
        restrict: 'C',
        link: function(scope, element, attributes) {
          return typeof FB !== "undefined" && FB !== null ? FB.XFBML.parse(element.parent()[0]) : void 0;
        }
      };
    });
  };

  _ref = ['fbActivity', 'fbComments', 'fbFacepile', 'fbLike', 'fbLikeBox', 'fbLiveStream', 'fbLoginButton', 'fbName', 'fbProfilePic', 'fbRecommendations'];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    pluginName = _ref[_i];
    createDirective(pluginName);
  }

}).call(this);

^这不是我的代码btw只是我拾起并为我工作的东西。这样做的方法是，如果你将类设置为数组中的任何值，那么它将尝试让facebook javascript解析节点/元素。

使用循环定义许多Angular指令

2 个答案: