javascript - html 页面中的 Angular 属性可见性

Question

我有一个简单的 Angular 页面:

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

我的问题是玩家输入框:ng-model="playerName"> 单击按钮时不提供值(绑定(bind)不起作用)。 但是，当我将它移到它所属的 DIV 元素上方时它会起作用。

这是该页面的 Controller :

'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;
}]);

这里有什么问题？

Answer 1

您的问题是 ng-if 创建了子作用域，因此您无法使用 ng-if 属性访问 div 内的属性。

你可以试试 $parent.playerName