具有隔离范围的多个角度指令实例的范围问题[关闭]答案

【问题标题】：Scope issues with multiple instances of Angular Directives with isolate scope [closed]具有隔离范围的多个角度指令实例的范围问题[关闭]
【发布时间】：2015-07-26 02:48:23
【问题描述】：

我试图创建一个表指令，它允许创建具有添加、删除和编辑选项的表。

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。我可以猜测这是范围界定问题，但无法弄清楚。

【问题讨论】：

您使用的是什么版本的 Angular？那个小提琴使用的是古老的 1.01。他们不允许您将链接放入小提琴并且没有代码是有原因的。问题应该是自包含的
请在问题本身中添加相关部分代码（请不要只是复制粘贴所有内容） - 不要依赖外部链接

标签： javascript angularjs angularjs-directive isolate-scope

【解决方案1】：

我认为问题在于您的模板包含模态定义，并且两者使用相同的 ID。所以第二个表中的删除按钮实际上是显示第一个表的删除对话框（ID 为“delPane”）。

查看用于显示 javascript 模式的服务，例如 https://angular-ui.github.io/bootstrap/（请参阅有关模式的部分）。

【讨论】：