AngularJS - Controller-Methode wird nicht auf ngClick aufgerufen - kein Fehler

Question

Ich versuche, die Methode removePlayer(playerId) aufzurufen, wenn eine Schaltfläche geklickt wird. Aber die Methode wird nicht aufgerufen, oder zumindest die Anweisungen darin werden nicht ausgelöst, weil ich eine console.log()-Anweisung an die Spitze gesetzt habe.

Die Konsole ist leer, also bin ich wirklich ahnungslos. Hier ist mein Code:

Controller:

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> 
... 

Answer 1

Sie sollten nicht im ng-Klick-Expression unter Verwendung von geschweiften Klammern ({{ }}) werden. Sie sollten schreiben:

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

Answer 2

ng-repeat schafft einen neuen Rahmen, so dass er nicht weiß, was removePlayer ist. Sie sollten so etwas zu tun in der Lage:

<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> 

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

Answer 3

Wie bereits erwähnt, ng-Repeat schafft es eigene Umfang ist, und der äußere Steuerungsbereich ist nicht verfügbar. Da aber in JS Sie verwenden echte Objekte schreiben Sie etwas wie folgt aus:

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

Vorweg, irgendwo auf dem Controller-Initialisierung können Sie die „removePlayer“ -Funktion jedes Ihrer Spieler Objekt assing und natürlich Code in alles, was Sie wollen, Dadurch wird indirekt auf den äußeren Controller zugegriffen.