Angularjs $compile嵌套指令，从另一个指令中编译

TL；博士

我想使用两个指令kmOuter和kmInner作为嵌套指令：

<div km-outer>
    <div km-inner></div>
    <div km-inner></div>
    <!-- ... -->
</div>

这样使用：

<button km-child-adder="[km-outer]">Add child</button>

.childAdded不再被调用

---

我怎样才能解决这个问题？或者可能这个设计本身就被破坏了，我应该重新组织我的代码？

对代码进行了一些编辑。链接中给出的代码

---

检查这是否是您所期望的。

对代码进行了一些编辑。链接中给出的代码

---

看看这是否是你所期望的。

我想我做到了，借用了@Mobin Skariya的答案

关键是只编译插入的元素，而不是所有元素：

link: function (scope, elem) {
    var target = angular.element(document.querySelector(scope.target));

    angular.element(elem[0]).bind('click', function () {
        var newInner = angular.element('<div km-inner="param"/>');
        target.append(newInner);

        scope.$apply(function () {
            $compile(newInner)(scope);
        });
    });
}

---

我已经准备好了第三个不相关的指令inserts，ad编译内部指令和工作的双向数据绑定，您会发现它。很好的一点是，第三个指令kmChildAdder可以插入内部指令，从多个独立的控制器进行绑定。

我想我做到了，借用了@Mobin Skariya的答案

关键是只编译插入的元素，而不是所有元素：

link: function (scope, elem) {
    var target = angular.element(document.querySelector(scope.target));

    angular.element(elem[0]).bind('click', function () {
        var newInner = angular.element('<div km-inner="param"/>');
        target.append(newInner);

        scope.$apply(function () {
            $compile(newInner)(scope);
        });
    });
}

---

我已经准备好了第三个不相关的指令inserts，ad编译内部指令和工作的双向数据绑定，您会发现它。很好的一点是，第三个指令kmChildAdder可以插入内部指令，从多个独立的控制器进行绑定。

这很接近，肯定是一个改进，谢谢。现在的问题是它重新编译了整个kmOuter指令，所以.childAdded被调用n次，其中n=子元素的数量。我希望每一个新来的孩子只叫一次。有什么想法吗？对不起，我没看到：没问题。反正我给了+1，因为你的想法可能有用。这不是我在本例中所需要的。我已经让它明白了我的答案-关键是不编译整个目标，而是只编译angular.element来使用scope.$apply进行正确的绑定。谢谢你的主意！很接近，肯定是进步了，谢谢。现在的问题是它重新编译了整个kmOuter指令，所以.childAdded被调用n次，其中n=子元素的数量。我希望每一个新来的孩子只叫一次。有什么想法吗？对不起，我没看到：没问题。反正我给了+1，因为你的想法可能有用。这不是我在本例中所需要的。我已经让它明白了我的答案-关键是不编译整个目标，而是只编译angular.element来使用scope.$apply进行正确的绑定。谢谢你的主意！

Error: [$compile:ctreq] Controller 'kmOuter', required by directive 'kmInner', 
can't be found!

link: function (scope, elem) {
            console.log(scope);
            var target = document.querySelector(scope.target);
            angular.element(elem[0]).bind('click', function () {
                var newInner = '<div km-inner></div>';
                angular.element(target).append(newInner);
                $compile(target)(scope)
            });
        }

link: function (scope, elem) {
    var target = angular.element(document.querySelector(scope.target));

    angular.element(elem[0]).bind('click', function () {
        var newInner = angular.element('<div km-inner="param"/>');
        target.append(newInner);

        scope.$apply(function () {
            $compile(newInner)(scope);
        });
    });
}