smoczyna smoczyna - 4 months ago 22
HTML Question

angular property visibility within html page

I have a simple angular page:

<div ng-controller="JoinGameController">
<table>
<tr ng-repeat="game in gameList">
<td>{{game}}</td>
<td>&nbsp;</td>
<td><a href="#!/joinGame" ng-click="selectGame(game)">select</a></td>
</tr>
</table>
<br/>
Selected game: &nbsp; {{selectedGameId}}
<br/>
<a href="#!/joinGame" ng-click="clearSelection()">Clear</a>

<div ng-if="isGameSelected"> &nbsp;
<p>To join this game put your name in the box and click the button</p>

<input type="text" ng-model="playerName">
<button ng-click="joinExistingGame()">Join Game</button>
<br/>
<p ng-if="playerAdded">{{addPlayerResponse}}</p>
</div>
</div>


my problem is that the player input box: ng-model="playerName">
doesn't provide the value when the button is clicked (binding doesn't work).
However it will work when I move it above the DIV element it belongs to.

Here is the controller of that page:

'use strict';

angular.module('pokerApp.joinGame', ['ngRoute'])

.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/joinGame', {
templateUrl: 'joinGame/joinGame.html',
controller: 'JoinGameController'
});
}])

.controller('JoinGameController', ['$http', '$scope', function ($http, $scope) {
$http.get('http://localhost:8080/PokerGame-REST/allGames').success(function (response) {
$scope.gameList = response;
});

$scope.selectedGameId = null;
$scope.isGameSelected = false;
$scope.playerName = '';
$scope.playerAdded = false;

function selectGame(game) {
$scope.selectedGameId = game;
$scope.isGameSelected = true;
}

function clearSelection() {
$scope.selectedGameId = null;
$scope.isGameSelected = false;
}

function joinExistingGame() {
$http.get('http://localhost:8080/PokerGame-REST/addHand', {
params: {
gameId: $scope.selectedGameId,
name: $scope.playerName
}
}).success(function (response) {
$scope.playerAdded = true;
$scope.addPlayerResponse = response.addHand;
});
}

$scope.selectGame = selectGame;
$scope.clearSelection = clearSelection;
$scope.joinExistingGame = joinExistingGame;
}]);


What is the catch here?

Answer

You issue is that ng-if creates child scope so you cannot access your property inside the div with ng-if attribute.

you may try $parent.playerName