我需要一些帮助或建议如何删除所有元素并销毁由isolated指令添加的所有Angular范围。
我有一个独立的指令，当由其他一些函数调用时，它会向DOM添加HTML表单行。 ng-click="AddForm()"。
到目前为止，我已经能够删除单个元素并破坏它的范围：
ng-click="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>