Javascript 将元素附加到指令中当前元素的子元素

我试图将一个元素附加到一个directives元素内的子元素。所以我有这个代码：

directives.group = function ($compile) {
    return {
        restrict: 'E',
        templateUrl: '../../Content/templates/RecruitingGroups/Group.html',
        link: function (scope, el) {
            scope.addRule = function () {
                var rule = $compile('<rule></rule>')(scope);
                $(el).find('#rule').append(rule);
            }
        }
    }
}

---

因此，换句话说，当我单击

addRule（）

时，我希望它将

元素附加到您当前单击

addRule（）

按钮的子

id=“rule”

中。

您的问题是没有创建新的作用域。因此，每次添加group指令时，实际上是在替换“old”addRule函数

尝试将scope:true添加到指令定义中。例如：

directives.group = function ($compile) {
    return {
        restrict: 'E',
        scope: true,
        templateUrl: '../../Content/templates/RecruitingGroups/Group.html',
        link: function (scope, el) {
            scope.addRule = function () {
                var rule = $compile('<rule></rule>')(scope);
                $(el).find('#rule').append(rule);
            }
        }
    }
}

directives.group=函数（$compile）{
返回{
限制：'E'，
范围：正确，
templateUrl:“../../Content/templates/recrutinggroups/Group.html”，
链接：功能（范围，el）{
scope.addRule=函数（）{
var规则=$compile（“”）（范围）；
$（el）.find（'#rule'）.append（rule）；
}
}
}
}

这将典型地继承父范围，然后您将能够为每个父范围定义函数addRule。在这种情况下，元素（el）应该是您所期望的

---

正如dave所建议的，用类替换id也可能是好的，因为id在文档中是唯一的。

除了Patrick关于范围的见解之外，您还可以通过让模型驱动DOM来避免使用jQuery。下面是一个简单的演示：

group.html模板：

<div>
    <input type="button" value="add a rule" ng-click="addRule()" />
    <div>
        <rule ng-repeat="rule in rules"></rule>
    </div>
</div>

此外，

#规则

对于页面来说应该是唯一的。由于您在重复该元素，因此id不是正确的选择，您应该使用类。但这不会使规则在页面加载时自动生成吗？我想在用户单击按钮时添加整个规则元素。不，这只会在scope.rules中有规则时创建规则元素。您可以使用规则或不使用规则初始化该数组。“由你决定，”阿连科说，试试我回答中的那句话。你可以看到，在点击按钮之前，没有任何规则被创建。我做到了，它工作得非常完美，我甚至添加到它上，来做我真正需要的事情

app.directive('group', function () {
    return {
        restrict: 'E',
        scope: true,
        templateUrl: 'group.html',
        link: function (scope, el) {
            scope.rules = [];

            scope.addRule = function () {
                scope.rules.push({id: scope.rules.length});
            }
        }
    }
});
app.directive('rule', function () {
  return {
    restrict: 'E',
    scope: true, 
    templateUrl: 'rule.html'
  }
});

<div>
    <input type="button" value="add a rule" ng-click="addRule()" />
    <div>
        <rule ng-repeat="rule in rules"></rule>
    </div>
</div>