AngularJS - 控制器方法不会在ngClick上调用 - 没有错误

116*_*684 20 javascript angularjs

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'];
Run Code Online (Sandbox Code Playgroud)

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>
...
Run Code Online (Sandbox Code Playgroud)

pko*_*rce 38

您不应该{{ }}在ng-click表达式中使用花括号().你应该写:

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

  • 是的,`ng-repeat`创建的范围从父范围继承,因此不需要`$ parent`引用.事实上,我们应该避免使用`$ parent`,因为它强烈地将事件处理程序中的表达式与模板结构链接起来(这足以插入另一个范围创建指令,事情可能会中断). (2认同)