Angular将一个元素附加到指令内的当前元素的子元素

Question

我正在尝试将元素附加到指令元素内的子元素。所以我有这个代码：

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

请注意链接中我有一个函数（）。该函数具有传递给它的范围和元素。我认为 'el' 会是独一无二的，就像做一个 jQuery addRule($this)。但似乎情况并非如此，因为如果这些<group> div 中有几个在页面上，则代码$(el).find('.getGroups').append(rule) 将附加到页面上该元素的最后一个实例。不要像我想象的那样去$this。

我的问题是如何将此<rule> 元素附加到this 指令。页面上没有另一个。

一些示例 HTML

<div>
    <group>
        <div ng-click="addRule()">
            <div id="rule">
                <rule></rule>
                <rule></rule>
            </div>
        </div>
    </group>
    <group>
        <div ng-click="addRule()">
            <div id="rule">
                <rule></rule>
            </div>
        </div>
    </group>
</div>

换句话说，当我单击addRule() 时，我希望它将<rule> 元素附加到您当前单击addRule() 按钮的子id="rule"。

Answer 1

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

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

group.html 模板：

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

Answer 2

您的问题是您没有创建新范围。因此，每次添加 group 指令时，实际上都是在替换“旧”的 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);
            }
        }
    }
}

这将在原型上继承父作用域，然后您将能够为每个作用域定义函数 addRule。在这种情况下，元素 (el) 应该是您所期望的。

按照 dave 的建议，将 id 替换为 class 也可能会很好，因为 id 在文档中是唯一的。