0

追加、削除、および編集オプションを使用してテーブルを作成できるテーブル ディレクティブを作成しようとしていました。

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

同様に、2 番目のテーブルの 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);
        }
        ...
    }
}
})

これがフィドルです。

行の削除は最初のテーブルでは機能しますが、2 番目のインスタンスでは機能しません。ageTable で何かを削除しようとすると、userTable の deleteHandler が呼び出されていることがわかりました。これはスコーピングの問題だと推測できますが、これを理解することはできません。

4

1 に答える 1

0

問題は、テンプレートにモーダル定義が含まれており、両方に同じ ID が使用されていることだと思います。したがって、2 番目のテーブルの削除ボタンは、実際には最初のテーブルの削除ダイアログ (ID 'delPane') を表示しています。

https://angular-ui.github.io/bootstrap/など、javascript からモーダルを表示するためのサービスを見てみましょう(モーダルのセクションを参照)。

于 2015-07-26T04:45:54.980 に答える