Question

我有一个以下问题：我有一个复杂的自定义指令，用于递归地从RESTful WS获取有关输入字段的信息。我想使用ng-click将此指令附加到包含当前<button>的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");
                }
            }
        }
    })

基本上，它看起来像这样：按<button> 1 后，<div> 2 的内容应该有嵌套指令，就像在<div> 3 。换句话说，该指令应附加到 1 的父级（元素 2 ）。

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

谢谢。

enter image description here

Answer 1

你可以这样做：

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

在html中：

<button ng-click="appendDirective()">Your Button</button>

您的控制器必须注入$ compile：

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

在ng-click上添加自定义AngularJS指令到容器HTML元素

1 个答案: