Angularjs指令未重新绘制

我正试图让递归指令在angular中工作。在stackoverflow上花了相当长的时间，并在angular文档中进行了深入研究之后，我已经使大部分工作正常。不过，我很难让这些行动奏效。正如我所期望的，对象正在更新，但指令似乎没有相应地重新绘制

以下是指令：

.directive('formgenerator', ['$compile', function ($compile) {
        return {
            restrict: 'E',
            terminal: true,
            scope: { val: '=', index: '=' },
            replace: true,
            link: function (scope, element, attrs) {
                var template = '<div data-ng-if="val">';
                template += !scope.val.type ? ''
                        : scope.val.type === 'text' ? '<label>{{val.label}}</label><input type="text" data-ng-model="val.value"></input><button ng-click="deleteMe(index)">delete</button>'
                            : scope.val.type === 'select' ? '<label>{{val.label}}</label><select data-ng-model="val.value" data-ng-options="v.name for v in val.values track by v.id"></select><button ng-click="deleteMe(index)">delete</button>'
                                : scope.val.type === 'multiselect' ? '<label>{{val.label}}</label><select data-ng-model="val.value" multiple="multiple" data-ng-options="v.name for v in val.values track by v.id"></select><button ng-click="deleteMe(index)">delete</button>'
                                    : '';
                template += '</div>';
                if (angular.isArray(scope.val.inputs)) {
                    template += '<ul class="indent"><li ng-repeat="input in val.inputs track by $index"><formgenerator val="input" index="$index"></formgenerator></li></ul>';
                }

                scope.deleteMe = function (index) {
                    scope.$parent.val.inputs.splice(index, 1);
                    //var inpts = scope.$parent.val.inputs;
                    //inpts.splice(index, 1);
                    //scope.$parent.val.inputs = inpts;

                    //scope.$parent.$parent.val.inputs.splice(index, 1);
                    //scope.$parent.$parent.$parent.val.inputs[scope.$parent.this.index].inputs.splice(scope.$parent.this.index, 1);
                };

                var newElement = angular.element(template);
                $compile(newElement)(scope);
                element.replaceWith(newElement);
            }
        };
    }]);

以下是JSFIDLE：

基本上，如果我点击文本值2旁边的删除按钮，我会期望单选择“消失”，多选择“上移”。不过，似乎正在发生的是，multiselect的值取代了select的值

---

在此方面的任何帮助都将不胜感激。

这里有一些错误：

按deleteMe键时，需要再次编译该元素并用新元素替换该元素。链接不会再次自动调用。 我认为您的索引分配不正确 我建议在执行递归指令之前先查看几个链接：

---

我能问一下为什么要编写递归指令而不是使用带有“template”属性的ng repeat来实现这一点吗？您能举个例子说明您所说的吗？基本上，我想用它为非预定对象创建一个表单。我不知道它提前筑巢的程度。或者我可能是一个拥有多个地址的人，每个地址都可以有多个电话号码。如果你认为这对我的场景有帮助的话，你能提供一个你正在谈论的例子吗？我已经尝试在firefox中逐步介绍了这一点，就我所知，索引似乎是正确的。我应该再次调用compile，因为我没有创建任何新元素？你能更新JSFIDLE吗？我还想添加一个“addother”方法，以便理解您所说的内容将有很大帮助。谢谢。您需要调用编译和替换，就像您最初在删除和添加中的链接中所做的那样。基本上，每当你对元素进行更改时，我都能理解你所说的，但是在之前的链接中，我是从我的模板创建一个新元素的。在delete me上，我没有模板，我的新元素应该是什么，旧元素也->看起来像作用域。$parent。$parent。$parent是对象，但不确定哪个属性将包含该元素。我不确定如何从子元素访问原始父元素，因为需要删除子元素并重新呈现父元素。你可能想研究我发布的链接。谢谢，我会看第一个链接。第二个链接是我获得大部分初始递归的地方，但我看不出有什么像你所说的。事实上，在其中一个JSFIDLE上有一个deleteMe方法似乎根本不起作用，它有一个if语句似乎总是为false，然后设置val={}，这有一个被删除的视觉效果，但我认为它并不像您所说的那样。

form = {
            inputs:
            [
                {
                    type: 'text',
                    value: 'textValue',
                    label: 'Text value',
                    defaultValue: 'defaultTextValue'
                },
                {
                    inputs:
                    [
                        {
                            type: 'text',
                            value: 'textValue1',
                            label: 'Text value1',
                            defaultValue: 'defaultTextValue1'
                        },
                        {
                            type: 'select',
                            value: 'textValue2',
                            values: [{ name: '1st', id: 1 }, { name: '2nd', id: 2 }],
                            label: 'Text value2',
                            defaultValue: 'defaultTextValue2'
                        },
                        {
                            type: 'multiselect',
                            value: 'textValue3',
                            values: [{ name: '1st', id: 1 }, { name: '2nd', id: 2 }],
                            label: 'Text value3',
                            defaultValue: 'defaultTextValue3'
                        }
                    ]
                }
            ]
        };