Javascript 删除并销毁由指令添加的一组AngularJS元素和作用域

我需要一些关于如何删除所有元素和销毁由隔离指令添加的所有角度范围的帮助或建议

我有一个单独的指令，当其他函数调用时，它会将HTML表单的行添加到DOM中，例如

ng click=“AddForm（）”

到目前为止，我已经能够删除单个元素并销毁其范围：

ng单击=“deleteSearchFilter（$event）”

我现在要做的是删除所有元素和作用域。例如，假设我添加了5行表单，现在我想在单击按钮时立即删除所有表单，例如

ng click=“deleteAll（）”

我不知道从哪里开始。下面是一段代码，演示如何删除单个元素和作用域。我最初的方法是在父作用域中定义一个数组，并在每次向DOM添加新元素时推送一个新对象。我不知道从这里到哪里去

//newSearchFilter Directive
  app.directive('newSearchFilter', function(){
    return {
      restrict: 'E',
      scope:{ searchFilterForm: "=",
              elementsArray: "="
       }, //New isolated scope => reusable directive
      templateUrl: '/core/products/new_search_filter.html',
      link: function(scope, element, attrs){
        //When a new form is added increment searchFilterForm.counter
        var x = ++scope.searchFilterForm.counter;
        console.log('elements-array lenght inside link function is',  scope.elementsArray.length);
        scope.elementsArray.push({index: x, scope: scope, element: element});
        console.log('scope.elementsArray',  scope.elementsArray);
      },
      controller: function($scope, $element){
        //Function gets a click $event
        $scope.deleteSearchFilter = function(e){
          //Removes element and also destroys the scope
          //Recommended way of doing this type of things
          $element.remove();
          $scope.$destroy();
          //when a form is deleted decrement searchFilterForm.counter
          var decrementCounter = --$scope.searchFilterForm.counter;
          console.log('elements-array length inside controller function is',  $scope.elementsArray.length);

        }
      }
    };
  });

newSearchFilter指令HTML模板。模板非常脏，因为它包含很多UI逻辑。这是我的第一次迭代，将改进它

<form id="new-search-filter-{{searchFilterForm.counter}}" ng-controller="productsFormFilterBuilderCtrl">
   <div class="row">
      <!-- Filter products on Product Name, Product Description etc  -->
      <div class="col-md-4">
         <div class="form-group">
            <select class="form-control" name="filter_field" id="filter_field"
               ng-options="option.name for option in default_form.options track by option.id"
               ng-model="default_form.selected_option">
            </select>
         </div>
      </div>
      <!-- Display only for Product Name, Description and Status-->
      <div ng-if="default_form.selected_option.name == 'Product Name' || 
         default_form.selected_option.name == 'Product Description' ||
         default_form.selected_option.name == 'Status'" >
         <!-- Filter on Product Name -->
         <div class="col-md-3" ng-if="default_form.selected_option.name == 'Product Name' ">
            <div class="form-group">
               <select class="form-control" name="product_name" id="product_name"
                  ng-options="option.name for option in product_name.operators track by option.id"
                  ng-model="product_name.selected_option">
               </select>
            </div>
         </div>
         <!-- Filter on Product Description -->
         <div class="col-md-3" ng-if="default_form.selected_option.name == 'Product Description' ">
            <div class="form-group">
               <select class="form-control" name="product_description " id="product_description "
                  ng-options="option.name for option in product_description.operators track by option.id"
                  ng-model="product_description.selected_option">
               </select>
            </div>
         </div>
         <!-- Filter on Product Status-->
         <div class="col-md-3" ng-if="default_form.selected_option.name == 'Status'">
            <div class="form-group">
               <select class="form-control" name="status_operators" id="status_operators"
                  ng-options="option.name for option in status_options.operators track by option.id"
                  ng-model="status_options.selected_option">
               </select>
            </div>
         </div>
         <div class="col-md-4">
            <div class="form-group" id="filter_input1">
               <input type="text" class="form-control" id="input_value" placeholder="Enter Value" name="input" ng-model="input.text">
            </div>
         </div>
         <!-- delete button-->
         <div class="col-md-1 text-center">
            <div class="form-group">
               <a ng-click="deleteSearchFilter($event)"><i class="fa fa-times fa-2x"></i></a>
            </div>
         </div>
      </div>
      <!-- Filters when End Date is selected. Attach datePicker controller here -->
      <div ng-if="default_form.selected_option.name == 'End Date'" ng-controller="datePickerCtrl">
         <div class="col-md-3">
            <div class="form-group">
               <select class="form-control" name="date_operators" id="date_operators"
                  ng-options="option.name for option in end_date_options.operators track by option.id"
                  ng-model="end_date_options.selected_option"></select>
            </div>
         </div>
         <!-- Filter when End Date is selected and Equal, Does Not Equal,
            Is Greater Than/or Equal To is selected-->
         <div ng-if="end_date_options.selected_option.name == 'Equal' || 
            end_date_options.selected_option.name == 'Does Not Equal' || 
            end_date_options.selected_option.name == 'Is Greater Than' ||
            end_date_options.selected_option.name == 'Is Greater Than Or Equal To' ">
            <div class="col-md-4">
               <div class="input-group">
                  <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close"/>
                  <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="open($event)"><i class="fa fa-calendar"></i></button>
                  </span>
               </div>
            </div>
         </div>
         <!-- Display end date datepicker for 'Is Less Than' or 'Is Less Than or Equal To'-->
         <div ng-if="end_date_options.selected_option.name == 'Is Less Than' 
            || end_date_options.selected_option.name == 'Is Less Than Or Equal To'">
            <div class="col-md-4">
               <div class="input-group">
                  <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                  <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="open($event)"><i class="fa fa-calendar"></i></button>
                  </span>
               </div>
            </div>
         </div>
         <!-- Displays two day pickers if 'End Date' && 'Is Between' is selected -->
         <div ng-if="end_date_options.selected_option.name == 'Is Between'" ng-controller="datePickerCtrl">
            <div class="col-md-2">
               <div class="input-group">
                  <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                  <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="open($event)"><i class="fa fa-calendar"></i></button>
                  </span>
               </div>
            </div>
            <div class="col-md-2">
               <div class="input-group">
                  <input type="text" class="form-control" uib-datepicker-popup="{{format}}" ng-model="dt" is-open="status.opened" min-date="minDate" max-date="maxDate" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                  <span class="input-group-btn">
                  <button type="button" class="btn btn-default" ng-click="open($event)"><i class="fa fa-calendar"></i></button>
                  </span>
               </div>
            </div>
         </div>
         <!-- delete button-->
         <div ng-if="end_date_options.selected_option.name == 'Equal' || 
            end_date_options.selected_option.name == 'Does Not Equal' || 
            end_date_options.selected_option.name == 'Is Greater Than' ||
            end_date_options.selected_option.name == 'Is Greater Than Or Equal To' || 
            end_date_options.selected_option.name == 'Is Less Than' 
            || end_date_options.selected_option.name == 'Is Less Than Or Equal To'">
            <div class="col-md-1 text-center">
               <div class="form-group">
                  <a ng-click="deleteSearchFilter($event)"><i class="fa fa-times fa-2x"></i></a>
               </div>
            </div>
         </div>

         <div ng-if="end_date_options.selected_option.name == 'Is Between'">
            <div class="col-md-1 text-center">
               <div class="form-group">
                  <a ng-click="deleteSearchFilter($event)"><i class="fa fa-times fa-2x"></i></a>
               </div>
            </div>
         </div>

      </div>
   </div>
</form>

请提供

newSearchFilter

@harriswenstein的HTML模板。newSearchFilter的HTML模板非常脏，因为它包含大量的UI逻辑。我计划使用schemaform AngularJS插件[以使其更具可读性和可维护性。请提供

newSearchFilter

@Harrisween的HTML模板，因为newSearchFilter的HTML模板非常脏，因为它包含大量的UI逻辑。我计划使用schemaform AngularJS插件[以提高可读性和可维护性。