Директива Angularjs не перерисовывается

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/

В принципе, если я ударил кнопку удаления рядом с текстовым значением2, я бы ожидал, что единственный выбор «исчезнет», а мультиселекция - «вверх». Однако, похоже, что значения мультиселектора перемещаются вместо значений для выбора.

Любая помощь в этом была бы принята с благодарностью.

Answer 1

Есть несколько ошибок здесь:

1. При нажатии DeleteMe, вам нужно снова собрать и заменить элемент с новым элементом. ссылка автоматически не будет вызвана.
2. Я не думаю, что ваш индекс быть назначены правильно

Я бы рекомендовал смотреть на несколько ссылок, прежде чем делать рекурсивные директивы:

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