AngularJS - ngClickでコントローラメソッドが呼び出されない - エラーなし

Question

ボタンがクリックされると、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> 
... 

Answer 1

を参照してください。あなたは書く必要があります：述べ、NGリピートとして

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

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

あなたはNGクリック式の中括弧（{{ }}）を使用すべきではないhttps://groups.google.com/forum/?fromgroups=#!topic/angular/NXyZHRTAnLA

Answer 3

は、それ自身のスコープを作成し、外側のコントローラスコープは使用できません。 、

<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」機能をASSINGことができます。しかし、JSで使用しているので、真のオブジェクトは、このような何かを書きます間接的に外部コントローラにアクセスします。