Question

我有一个简单的角度页面：

<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”＆gt; 单击按钮时不提供值（绑定不起作用）。但是当我将它移动到它所属的DIV元素上方时它会起作用。

以下是该页面的控制器：

'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

Answer 2

使用ng-if指令创建自己的范围的问题。因此，在playerName指令的范围内添加了ng-if。

只需在主范围变量中创建，例如：player={}，并使用它

<input type="text" ng-model="player.playerName">

html页面中的角度属性可见性

2 个答案: