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

Question

I am trying to append an element to a child element inside of a directives element. So I have this code:

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

Notice in the link I have a function(). The function has scope and element passed into it. I thought 'el' would be unique and would be like doing a jQuery addRule($this) . But it appears this is not the case because if several of these <group> divs are on the page the code $(el).find('.getGroups').append(rule) will append to the last instance of that element on the page. Not to $this like I imagined it would work.

My problem is how do I append this <rule> element to this directive. Not another one an the page.

Some Example 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>

So in other words When I click addRule() I want it to append the <rule> element to the child id="rule" where you currently clicked the addRule() button.

Answer 1

Your problem is that you are not creating a new scope. So everytime you add the group directive, you are essentially replacing the "old" addRule function.

Try adding scope: true to your directive definition. Example:

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

This will prototypically inherit the parent scope and then you will be able to define function addRule for each. In this case, the element (el) should be what you expect.

It would also probably be good to replace id with class as dave suggests since an id is intended to be unique within a document.

Answer 2

In addition to Patrick's insight about scope, you may be able to avoid using jQuery by letting your model drive the DOM. Here is a simple demo: 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 template:

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