将 ng-click 绑定到动态数组上的 ng-repeat

Question

上下文

我有一个数组 hand。我正在使用 ng-repeat="card in hand" 遍历卡片。我 ng-click="select(card)" 需要用这张卡片做点什么。

这在使用 hand 的初始值时工作正常，但是一旦我开始向 hand 数组添加卡片，ng-click 就不再触发。

问题

如何让 ng-click 在动态数组上触发 ng-repeat？

代码（简化）

card.html:

<div>
    <h1>{{data.title}}</h1>
    <p>{{data.description}}</p>
    <button ng-click="select(data)">Select</button>
</div>

hand.html

<card ng-repeat="card in hand" data="card"></card>

card.js:

app.directive('card', function() {
    return {
        restrict: 'E',
        scope: {
            data: '='
        },
        templateUrl: 'card.html',
        controller: 'HandCtrl'
    };
});

hand.js:

app.directive('hand', function() {
    return {
        restrict: 'E',
        scope: {
            data: '='
        },
        templateUrl: 'hand.html',
        controller: 'HandCtrl'
    };
});

handCtrl.js:

app.controller('HandCtrl', ['$scope', 'getHand', function($scope, getHand) {
    getHand.then(function(hand) {
        $scope.hand = hand;
        $scope.select = function(card) {
            card.selected = true;
            $scope.hand.splice(card.position, 1);
        };
    });
}]);

在代码的其他地方...

app.controller('DeckCtrl', ['$scope', 'getDeck', 'getHand', function($scope, getDeck, getHand) {
    getDeck.then(function(deck) {
        $scope.deck = deck;
        getHand.then(function(hand) {
            $scope.hand = hand;
            $scope.drawCard = function() {
                var card = deck.splice(0, 1)[0];
                // ng-repeat shows this new card, but ng-click doesn't trigger
                $scope.hand.push(card);
            };
        });
    });
}]);

由

触发

<button ng-click="drawCard">Draw</button>

Answer 1

将你的 ng-repeat 切换到 ng-repeat="(index, card) in hand" 并将索引传递给你的函数，如下所示：

<div>
    <h1>{{data.title}}</h1>
    <p>{{data.description}}</p>
    <button ng-click="select(index)">Select</button>
</div>

并更新您的 javascript 代码以直接操作 hand 数组。应该可以正常工作。

将 ng-click 绑定到动态数组上的 ng-repeat

Binding ng-click to ng-repeat on a dynamic array

javascript

angularjs

angularjs-ng-repeat

angularjs-ng-click

上下文

问题

代码（简化）