AngularJS按钮点击不触发功能

AngularJS button click not triggering function

本文关键字:功能 按钮 AngularJS      更新时间:2023-09-26

我正在尝试修改:https://github.com/amirrajan/nodejs-against-humanity

为了遵守我制定的游戏规则。最重要的部分之一是,应该有一个带有提交按钮的文本框,而不是白色卡片。当我按下submit时,什么都没有发生——Javascript警报不会触发或发生任何事情。

game.html:

<div class="row" ng-show="showWhiteCardList()">
  <table id="whiteCards" class="table">
    <tbody id="whiteCardSelection">
      <tr>
        <td>
          <textarea ng-model="situationAppendage"></textarea>
          <button class="btn btn-default" ng-click="selectSituation(situationAppendage)">Submit</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>

services.js:

angular.module('myApp.services', [])
  .factory('GameService', function($http) {
        var s4 = function() {
            return Math.floor(Math.random() * 0x10000).toString();
        };
        var guid = function(){
            return s4() + s4() + "-" + s4() + "-" + s4() + "-" + s4() + "-" + s4() + s4() + s4();
        };
        var pId = guid();
        return {
            playerName: '',
            playerId : pId,
            newGameId : guid(),
            currentGameId: undefined,
            initName: function() {
                if(this.playerName.length === 0) {
                    this.playerName = 'anonymous ' + s4();
                }
            },
            getGames: function() {
                return $http.get('/list');
            },
            createGame: function() {
                return $http.post('/add', { id: guid(), name: this.playerName + "'s game" });
            },
            joinGame: function(gameId, playerId, name) {
                return $http.post("/joingame", { gameId: gameId, playerId: playerId, playerName: name });
            },
            departGame: function(gameId, playerId) {
                $http.post('/departgame', { gameId: gameId, playerId: playerId});
            },
            selectCard: function(gameId, playerId, selectedCard){
                $http.post("/selectCard", { gameId: gameId, playerId: playerId, whiteCardId: selectedCard });
            },
            selectSituation: function(gameId, playerId, textBoxText){
                $http.post("/selectSituation", { gameId: gameId, playerId: playerId, textBoxText : textBoxText });
            },
            selectWinner: function(gameId, selectedCard) {
                $http.post("/selectWinner", { gameId: gameId, cardId: selectedCard });
            },
            readyForNextRound: function(gameId, playerId) {
                $http.post("readyForNextRound",  { playerId: playerId, gameId: gameId });
            }
        };
    });

controllers.js:

$scope.selectSituaton = function(textToAppend) {
  alert('Situation fired');
  GameService.selectSituaton($scope.gameId, $scope.playerId, textToAppend);
};

server.js:

app.post('/selectSituation', function(req, res) {
  console.log("Triggered");
  Game.selectSituation(req.body.gameId, req.body.playerId, req.body.textBoxText);
  broadcastGame(req.body.gameId);
  returnGame(req.body.gameId, res);
});

我是Node.JS、AngularJS和Javascript的新手,所以我可能缺少一些显而易见的东西。感谢您的帮助!

问题是控制器中selectSituation的打字错误。目前,它是$scope。选择Situaton,而它应该是$scope。选择Sitation

尝试使用以下代码:

$scope.selectSituation = function(textToAppend) {
  alert('Situation fired');
  GameService.selectSituaton($scope.gameId, $scope.playerId, textToAppend);
};

我相信它会解决你的问题。

干杯!