如何將自定義角度指令附加到另一個自定義角度指令？

Question

我有兩個自定義的角度指令，一個重復地附加第二個。 問題是，盡管標簽已附加，但指令的模板未附加。 當我手動將其插入時，它可以工作。

看到這個jsfiddle： http : //jsfiddle.net/HB7LU/5555/

這是附加代碼：

myApp.directive('formList', function () {
    return {
        template: '<my-form></my-form>',
        require:'^repeatableForm',
        restrict: 'E',
        link: function (scope, element, attrs, repeatableFormCtrl) {
            scope.add = function () {
                console.log("test");
                element.append('appended <my-form></my-form>'); // apended<my-form></my-form> will appear but not the contents of <my-form>
            };
        }
    };
});

Answer 1

您必須使用$compile服務來手動編譯my-form指令，如下所示：

myApp.directive('formList', function ($compile) {
    return {
        template: '<my-form></my-form>',
        require:'^repeatableForm',
        restrict: 'E',
        link: function (scope, element, attrs, repeatableFormCtrl) {
            scope.add = function () {
                console.log("test");
                var newForm = $compile('<span>appended </span><my-form></my-form>')(scope);
                element.append(newForm);
            };
        }
    };
});

示例JSFiddle： http : //jsfiddle.net/9L3whcqc/