在动态数组上绑定 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 数组。应该可以正常工作。