作用域问题:Angular指令的多个实例具有隔离作用域

Scope issues with multiple instances of Angular Directives with isolate scope

本文关键字：作用域 实例 隔离 问题 Angular 指令      更新时间：2023-09-26

我试图创建一个表指令，让创建表添加，删除和编辑选项。

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);
        }
        ...
    }
}
})

小提琴来了。

Delete row适用于第一个表，但不适用于第二个实例。我认为当试图删除ageTable中的某些东西时，正在调用userTable的deleteHandler。我猜这是一个范围问题，但不能弄清楚。

我认为问题在于您的模板包含模态定义，并且两者使用相同的ID。因此，第二个表中的删除按钮实际上显示了第一个表的删除对话框(ID为'delPane')。

看一看从javascript中显示模态的服务，比如https://angular-ui.github.io/bootstrap/(参见模态部分)。

相关文章：