Scope issues with multiple instances of Angular Directives with isolate scope

Question

I was trying to create a table directive which lets create tables with add, delete and edit options.

HTML

// User table
<atable config="userTable"></atable>
// Age table
<atable config="ageTable"></atable>

JS (Controller)

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

Similarly I have created ageData and ageTable config for the second table.

JS (Directive)

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

Here is the Fiddle.

Delete row works for the first table but not for the second instance. I figured that the deleteHandler of the userTable is being called when trying to delete something in the ageTable. I can guess that this is scoping issue but can't figure this out.

Answer 1

I think the problem is that your template includes the modal definition, and the same ID is used for both. So the delete button in the second table is actually showing the delete dialog (with ID 'delPane') for the first table.

Take a look at a service for displaying the modal from javascript, such as https://angular-ui.github.io/bootstrap/ (see section on Modals).