smoczyna smoczyna - 1 year ago 82
HTML Question

angular property visibility within html page

I have a simple angular page:

<div ng-controller="JoinGameController">
<tr ng-repeat="game in gameList">
<td><a href="#!/joinGame" ng-click="selectGame(game)">select</a></td>
Selected game: &nbsp; {{selectedGameId}}
<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>
<p ng-if="playerAdded">{{addPlayerResponse}}</p>

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 Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download