Метод AngularJS - controller не вызван на ngClick - нет ошибки

Я пытаюсь вызвать метод removePlayer(playerId), если нажать кнопку. Но метод не вызывается, или, по крайней мере, внутри него не срабатывают, потому что я положил оператор console.log() вверху.

Консоль пуста, поэтому я действительно не знаю. Вот мой код:

Контроллер:

function appController($scope) {
    $scope.players = [];
    var playercount = 0;

    $scope.addPlayer = function(playername) {

        $scope.players.push({name: playername, score: 0, id: playercount});
        playercount++;
    }

    function getIndexOfPlayerWithId(playerId) {
        for (var i = $scope.players.length - 1; i > -1; i--) {
            if ($scope.players[i].id == playerId)
                return i;
        }
    }

    $scope.removePlayer = function(playerId) {
        console.log("remove");
        var index = getIndexOfPlayerWithId(playerId);
        $scope.players.slice(index, 1);
    }
}
appController.$inject = ['$scope'];

HTML:

...
<table id="players">
        <tr ng-repeat="player in players">
            <td>{{player.name}}</td>
            <td>{{player.score}}</td>
            <td><button ng-click="removePlayer({{player.id}})">Remove</button></td>
        </tr>
    </table>
...

Ответ 1

Нельзя использовать фигурные скобки ({{ }}) в выражении ng-click. Вы должны написать:

<button ng-click="removePlayer(player.id)">Remove</button>

Ответ 2

ng-repeat создает новую область видимости, поэтому она не знает, что такое removePlayer. Вы должны сделать что-то вроде этого:

<table id="players">
    <tr ng-repeat="player in players">
        <td>{{player.name}}</td>
        <td>{{player.score}}</td>
        <td><button ng-click="$parent.removePlayer({{player.id}})">Remove</button></td>
    </tr>
</table>

См. https://groups.google.com/forum/?fromgroups=#!topic/angular/NXyZHRTAnLA

Ответ 3

Как указано, ng-repeat создает свою собственную область видимости, а область внешнего контроллера недоступна. Но так как в JS вы используете истинные объекты, пишите что-то вроде этого:

<tr ng-repeat="player in players">
    <td>{{player.name}}</td>
    <td>{{player.score}}</td>
    <td><button ng-click="player.removePlayer()">Remove</button></td>
</tr>

Предварительно, где-то на инициализации вашего контроллера вы можете определить функцию "removePlayer" для каждого вашего игрового объекта и, естественно, закодировать в любом месте, чтобы косвенно получить доступ к внешнему контроллеру.