Javascript 用循环定义多个角度指令

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

---

无济于事。有什么好办法吗？

我认为你不应该这样做。您应该将该值传递到指令中。但是，如果您真的觉得需要这样做，那么它确实可以很好地工作：

HTML:

你好，{{name}}！

JS:

var myApp=angular.module（'myApp'，[]）；
var dirs=['note'，'introduction'，'thing']；
角度。forEach（dirs，function（dir）{
myApp.directive（dir，function（）{
返回{
限制：'E'，
是的，
模板：“某物”
}
});
});

我得说，这可能是我说话的重点，但如果你知道自己在做什么，我并不认为这有什么大问题：

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

（函数（）{
var createDirective，module，pluginName，_i，_len，_ref；
module=angular.module（'FacebookPluginDirectives'，[]）；
createDirective=函数（名称）{
返回module.directive（名称，函数（）{
返回{
限制：“C”，
链接：功能（范围、元素、属性）{
返回类型FB！==“未定义”&&FB！==null？FB.XFBML.parse（element.parent（）[0]）：void 0；
}
};
});
};
_ref=['fbActivity'、'fbComments'、'fbFacepile'、'fbLike'、'fbLikeBox'、'fbLiveStream'、'fbLoginButton'、'fbName'、'fbProfilePic'、'FBRecommensions']；
对于（_i=0，_len=_ref.length；_i<_len；_i++）{
pluginName=_ref[_i]；
createDirective（pluginName）；
}
}).打电话（这个）；

---

^顺便说一句，这不是我的代码，只是我学会的，并为我工作过的东西。解决方法是，如果将类设置为数组中的任何值，那么它将尝试让facebook javascript解析节点/元素。

在本例中，这是什么<代码>窗口？整个代码块都在它自己的JS文件中，没有包装在任何其他文件中“这指的是全局对象”是的，你说得对啊，谢谢。因此，实际上，

window

（或者我猜在node中应该是

process

）。我想如果我是你，在这种情况下，我会坚持只使用div上的类来表示它们是什么，而不是为所有内容创建自定义标记。通过这种方式（使用类），如果您想在特定情况下调整一个div，您可以将多个div关联起来。而且，我不认为易读性会受到很大影响。在旧版IE中，如果你打算使用restrict，你也必须为你制作的每一个元素执行createElement:“E”我的第一反应是将值传递给指令，但最终我希望我的视图读起来像一个更结构化的文档，而且

你应该仔细阅读

看起来比

你应该仔细阅读

要好。再说一次，我对棱角分明的人还是比较陌生的。可读性的好处是否超过了在指令创建上循环的“不自然性”？@jclancy好吧，创建新元素是Angular最特别的特性之一。在看到您的示例之后，我收回了我所说的关于传递值的内容。我想我喜欢你做得更好的方式。指令实际上是一个自包含、可重用的组件。我建议Angular团队和大多数Angular开发人员建议您尝试做的是一个糟糕的想法。干燥是一条经验法则，而不是不变的物理定律。为什么循环中会出现奇怪的情况？为什么不使用数组的长度，而我喜欢使用常规的长度？我已经在几个组件中看到了这一点（实际上，在通用的“社交媒体图标”中使用了类似的东西）它会自动拉取正确的图标并创建链接，这与我使用的属性不完全一样，但让我看看它是否有帮助……我也在angularjs中见过facebook插件包装的这种技术。@shaunhusain，当I==dirs.length，dir=undefined，循环停止时。因为我们使用的是angular，我更喜欢它有棱角的forEach@jtseng是的，我知道它仍然可以工作，只是在循环使用这种条件时通常会看到，当for循环检查长度条件是明确的并且工作得非常好时，使用它似乎不必要地令人困惑。@shaunhusain它一开始让人困惑，但我想我更喜欢使用它而不是使用迭代变量b如果我被一个迭代变量所困扰，我希望它都在一个地方，最好对我隐藏。

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

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

    <div ng-app="myApp">

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

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

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