Question

我试图获得一个以角度为单位的递归指令。经过相当多的时间在stackoverflow和挖掘角度文档后，我已经完成了大部分工作。我很难让行动起作用。该对象正如我所期望的那样得到更新，但该指令似乎没有相应地重新绘制。

这是指令：

.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);
            }
        };
    }]);

这是控制器传递给指令的对象：

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'
                        }
                    ]
                }
            ]
        };

这是jsFiddle：http://jsfiddle.net/5YCe7/1/

基本上，如果我点击Text value2旁边的删除按钮，我会期望单个选择'消失'而多选择'向上移动'。然而，似乎正在发生的事情是多选的值移动而不是选择的值。

对此的任何帮助将不胜感激。

Answer 1

这里有一些错误：

当您按deleteMe时，您需要再次使用新元素编译和替换该元素。链接不会再自动被调用。
我认为你的索引没有被正确分配

我建议在制作递归指令之前查看一些链接：

Is it possible to make a Tree View with Angular? Recursion in Angular directives

Angularjs指令没有重绘

1 个答案: