Javascript 在ng click上向容器HTML元素附加自定义AngularJS指令

我有一个问题：我有一个复杂的自定义指令，用于从我们的

restfulws

递归地获取关于输入字段的信息。我想使用

ng click

将此指令附加到一个HTML元素，该元素包装当前的

。 请看一下

appendDirective

函数。这是一个应该向调用它的父元素追加指令的元素

指令如下所示：

app.directive('recursiveFields', function ($compile, $http) {
        return {
            scope: {
                field: '=field',
                model: '=model'
            },
            restrict: 'E',
            replace: true,
            controller: "httpPostController",
            template: '<div ng-repeat="nestedField in field.nestedFields"><div ng-show="{{!nestedField.isEntity && !nestedField.isEnum}}">' + '<p ng-show={{nestedField.isRequired}}>{{nestedField.name}}*: </p>' + '<p ng-show={{!nestedField.isRequired}}>{{nestedField.name}}: </p>' + '<input type="text" ng-model="model[nestedField.name]" ng-change="getCreateEntityAsText()"' + 'class="form-control" placeholder="{{parseClassName(nestedField.type)}}">' + '</div>' + '<div ng-show="{{nestedField.isEnum}}">' + '<p ng-show={{nestedField.isRequired}}>{{nestedField.name}}*: </p>' + '<p ng-show={{!nestedField.isRequired}}>{{nestedField.name}}: </p>' + '<select ng-model="model[nestedField.name]" ng-change="getCreateEntityAsText()" class="form-control">' + '<option></option>' + '<option ng-repeat="enumValue in nestedField.enumValues" label={{enumValue.name}}>{{enumValue.ordinal}}</option>' + '</select>' + '</div>' +

            '<div ng-show="{{nestedField.restResourceName != null}}">' + '<accordion close-others="oneAtATime">' + '<accordion-group heading={{nestedField.name}} is-open="false">' + /*'<recursive-fields model="createEntityResource" field="field"></recursive-fields>'*/
            '<button type="button" ng-click="appendDirective()">I should append a "recursiveFields" directive</button>' + '</accordion-group>' + '</accordion>' + '</div>' + '</div>',

            link: function (scope, element, attrs) {
                console.log("1");
                if (scope.field.restResourceName != null) {
                    $http.get(CONSTANTS.EXPLAIN_URL + "/" + scope.field.restResourceName).success(function (data, status) {
                        scope.field.nestedFields = [];
                        data.content.resource.fields.forEach(function (field) {
                            if (field.isEnum) {
                                $http.get(CONSTANTS.ENUMS_URL + scope.$root.parseClassName(field.type)).success(function (data, status) {
                                    field.enumValues = [];
                                    for (var index in data.content.values) {
                                        field.enumValues.push(data.content.values[index]);
                                    }
                                })
                            }
                            scope.field.nestedFields.push(field);
                        })
                    })
                }

                scope.appendDirective = function () {
                    var newDir = angular.element('<recursive-fields model="createEntityResource" field="field"></recursive-fields>');
                    $compile(newDir.contents())(scope);
                    alert("Done");
                }
            }
        }
    })

app.directive（'recursiveFields'，函数（$compile，$http）{
返回{
范围：{
字段：'=字段'，
模型：'=模型'
},
限制：'E'，
替换：正确，
控制器：“httpPostController”，
“p-p-p-p-p-p-p-p-p-p-p-p-p-布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布布1.序数}' + '' + '' +
'' + '' + '' + /*''*/
'我应该附加一个“recursiveFields”指令'++'++'''++'''''，
链接：函数（范围、元素、属性）{
控制台日志（“1”）；
if（scope.field.restResourceName！=null）{
$http.get（CONSTANTS.EXPLAIN_URL+“/”+scope.field.restResourceName）.success（函数（数据、状态）{
scope.field.nestedFields=[]；
data.content.resource.fields.forEach（函数（字段）{
if（字段.isEnum）{
$http.get（CONSTANTS.ENUMS_URL+scope.$root.parseClassName（field.type））.success（函数（数据、状态）{
field.enumValues=[]；
for（data.content.values中的var索引）{
field.enumValues.push（data.content.values[index]）；
}
})
}
scope.field.nestedFields.push（字段）；
})
})
}
scope.appendDirective=函数（）{
var newDir=角度元素（“”）；
$compile（newDir.contents（））（范围）；
警惕（“完成”）；
}
}
}
})

基本上，它看起来是这样的：按下

1后，

2的内容应该有嵌套指令，就像在
3中一样。换句话说，指令应该附加到1（元素2）的父元素

有人知道如何解决这个问题吗？每一个有用的答案都受到高度赞赏和评价

多谢各位

您可以执行以下操作：

$scope.appendDirective = function () {
  var recursiveFields = $("<recursive-fields />");
  recursiveFields.attr("aParam", "aValue");
  recursiveFields.insertAfter(yourButton);
  $compile(recursiveFields)($scope);
}

谢谢你，我会尝试一下，让你知道这对我是否有效。这有效，但还有一件事要做。如何检测调用函数的元素？注意：该功能是在指令中定义的，而不是在控制器中定义的。由于未知原因，我无法从控制器访问它。您可以将元素的名称传递给函数：appendDirective（“button01”）。
<button ng-click="appendDirective()">Your Button</button>

myApp.controller("myController", $compile) {
}