我正在尝试创建一个表指令,该指令允许使用添加,删除和编辑选项创建表。
HTML
// User table
<atable config="userTable"></atable>
// Age table
<atable config="ageTable"></atable>
JS(控制器)
var userData = [{
un: 'user1',
pwd: 'password',
ph: '500000000',
id: 2
},..];
$scope.userTable = {
cols: ['Username', 'Password', 'Contact'],
rows: userData,
deleteRow: true,
deleteHandler: function (id) {
console.log(id);
for (var i = 0; i < userData.length; i++) {
if (userData[i].id == id) {
userData.splice(i, 1);
break;
}
}
},..
};
同样,我为第二个表创建了ageData和ageTable配置。
JS(指令)
.directive("atable", function () {
return {
restrict: "E",
scope: {
config: '='
},
template: 'Look at fiddle'
controller: function ($scope) {
$scope.deleteRow = function (row) {
$scope.config.currEditRow = angular.copy(row);
}
...
}
}
})
这是Fiddle。
删除行适用于第一个表,但不适用于第二个实例。我想在尝试删除ageTable中的某些内容时正在调用userTable的deleteHandler。我可以猜测这是一个范围问题,但无法解决这个问题。
答案 0 :(得分:0)
我认为问题在于您的模板包含模态定义,并且两者都使用相同的ID。因此,第二个表中的删除按钮实际上显示了第一个表的删除对话框(带有ID&#39; delPane&#39;)。
查看用于显示javascript模式的服务,例如https://angular-ui.github.io/bootstrap/(请参阅模态部分)。