javascript - 使用循环定义许多 Angular 指令

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

问题必须表现出对所解决问题的最低限度的理解。告诉我们您尝试过做什么，为什么不起作用，以及它应该如何工作。另请参阅:Stack Overflow question checklist

已关闭10 年前。

Improve this question

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

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

与note被许多其他东西所取代。我想将它们全部定义在一个循环中以保持干燥。我试过了

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