我想要能够删除的模态中有一行。也可以添加新的。
我有一个修剪过的模板如下：
<div class="filter-row" delete-filter>
<div class="form-group>
<div class="delete-filter" ng-click="deleteFilter()"><i class="fa fa-trash"></i></div>
</div>
</div>
指令如下：
.directive('deleteFilter', function() {
return {
restrict: 'A',
link: function(scope, element) {
// Scope function to delete a filter row from the DOM
scope.deleteFilter = function() {
console.log("Deleting");
// Remove the directive element
element.remove();
};
}
};
});
这似乎可以很好地删除单个过滤器行。但是，如果在已存在行的情况下从此模板添加新行，则只能删除其中一行。如果我添加许多行并想要删除，我仍然只能删除一行。
要注意：每次单击删除行时，系统中的控制台日志都会触发，无论该行是否被删除。
任何帮助将不胜感激。我想我错过了一些东西，但我无法弄清楚是什么。
修改
从控制器添加了一个带有此功能的新过滤器：
// Function to add a new filter row in the filter modal window
self.addFilterRow = function() {
var newFilterRow = $compile("<filter-row></filter-row>")($scope);
$("#filterForm").append(newFilterRow);
};
这是一个可以更好地描述我遇到的问题的Plunkr：
答案 0 :(得分：0)
如果我理解了您的问题，继承的范围应该为您解决。将scope: true添加到指令中，例如：
.directive('deleteFilter', function() {
return {
restrict: 'A',
scope: true,
link: function(scope, element) {
// Scope function to delete a filter row from the DOM
scope.deleteFilter = function() {
console.log("Deleting");
// Remove the directive element
element.remove();
};
}
}; });
答案 1 :(得分：0)
<h3>Repeat stuff:</h3>
<div ng-app='app' ng-controller="MyCtrl">
<ul>
<li ng-repeat="(country,goals) in items">{{country}}: {{goals}}
<div class="filter-row" delete-filter>
<div class="form-group>
<div class=" delete-filter " ng-click="deleteFilter() "><input type='button' value='delete'></div>
</div>
</div>
</li>
</ul>
</div>
并且js代码是
var items = {
"India": "2",
"England": "2",
"Brazil": "3",
"UK": "1",
"USA": "3",
"Syria": "2"
};
var app = angular.module('app', []);
app.controller('MyCtrl', function($scope) {
$scope.items = items;
});
app.directive('deleteFilter', function() {
return {
restrict: 'A',
link: function(scope, element) {
// Scope function to delete a filter row from the DOM
scope.deleteFilter = function() {
console.log("Deleting");
// Remove the directive element
element.remove();
};
}
};
});
请找到问题的工作小提琴：
http://jsfiddle.net/RkykR/2326/
希望它对你也有用.. :)）
答案 2 :(得分：0)
使用继承范围。
GsonConverterFactory这样，JacksonConverterFactory将在.directive('deleteFilter', function() {
return {
restrict: 'A',
//Use inherited scope
scope: true,
link: function(scope, element) {
// Scope function to delete a filter row from the DOM
scope.deleteFilter = function() {
console.log("Deleting");
// Remove the directive element
element.remove();
};
}
};
});
指令创建的范围上调用。
同时删除ng-click="deleteFilter()"指令中的deleteFilter。
replace: true在兄弟指令上使用filterRow时，app.directive('filterRow', function() {
return {
scope: false,
//REMOVE this
//replace: true,
restrict: 'E',
templateUrl: 'filter-row.html',
};
});
指令上的继承范围将被删除。
replace: true已弃用 1 来自文档：
deleteFilter（[已弃用！]，将在下一个主要版本中删除 - 即v2.0）指定模板应替换的内容。默认为
replace:true。
replace- 模板将替换指令的元素。false- 模板将替换指令元素的内容。
- AngularJS Comprehensive Directive API
来自GitHub：
Caitp--它已被弃用，因为
true存在已知的非常愚蠢的问题，其中一些问题无法以合理的方式得到解决。如果你小心并避免这些问题，那么对你有更大的帮助，但为了新用户的利益，更容易告诉他们“这会让你头痛，不要这样做。”
答案 3 :(得分：0)
要解决您的问题，请将filterRow指令的范围设置为true。
app.directive('filterRow', function() {
return {
scope: true,
replace: true,
restrict: 'E',
templateUrl: 'filter-row.html',
};
});
app.directive('deleteFilter', function() {
return {
restrict: 'A',
scope: true,
link: function(scope, element) {
// Scope function to delete a filter row from the DOM
scope.deleteFilter = function() {
console.log("Deleting",element);
// Remove the directive element
element.remove();
};
}
};
});
基本上将其设置为true将允许它创建行的新实例。设置为false时，将只有一个行的实例，每次单击delete时，它将删除最后创建的行。