Question

添加嵌套视图后代码停止工作 - AngularJS

大家好，

我有一个简单的页面，可以根据设置的单词检查文本输入。在我的原始代码中，该页面使用以下内容（original code）

如果用户未输入文本，则代码将提示他们不要将文本字段留空。
文本将被比较，如果错误，猜测次数减少，然后用户将有另一次机会输入正确的答案。
如果用户得到了正确答案，警报会提示他们正确答案。
如果用户用完了尝试，页面会弹出一个警告，让用户知道他们没有猜测，并会让他们知道正确的单词是什么。

我在代码中添加了嵌套视图，现在我的代码坏了，因为它始终告诉用户文本字段为空（nested view code）

我不确定这是否是我的控制器的问题，但我上下我的代码，我找不到问题。

这是游戏的控制器

  gameApp.controller('wordController', function($scope)
    {
    $scope.guess = '';
    $scope.guesses = [];
    $scope.guessed= '';
    $scope.allowed = 6;
    $scope.wordToGuess = "Just";
    $scope.guestGuess = "";

    $scope.pushGuess = function () {
        $scope.guesses.push($scope.guestGuess);
        $scope.guessed = $scope.guesses.length;
        $scope.resetGuess();
        $scope.$apply();
    };

    $scope.resetGuess = function() {
        $scope.guestGuess = '';
    };

    $scope.addGuess = function()
        {
        if ($scope.guestGuess === null || $scope.guestGuess === '')
            {
                $("input[type=text]").ready(function () { $("#guessEntry").addClass("has-error"); });
                $("#guessStatus").removeClass("glyphicon glyphicon-thumbs-down form-control-feedback");
                $("#guessStatus").addClass("glyphicon glyphicon-remove form-control-feedback");
                $scope.result = "   Please enter a guess\n\nDon't leave the box empty.";
                alert($scope.result);
            }
        else if ($scope.guestGuess.toLowerCase() == $scope.wordToGuess.toLowerCase())
            {
                $("input[type=text]").ready(function () { $("#guessEntry").removeClass("has-warning").removeClass("has-error").addClass("has-success has-feedback"); });
                $("#guessStatus").removeClass("glyphicon glyphicon-thumbs-down form-control-feedback").removeClass("glyphicon glyphicon-remove form-control-feedback");
                $("#guessStatus").addClass("glyphicon glyphicon-thumbs-up form-control-feedback");
                $scope.pushGuess(guestGuess);
                $scope.result = "You have guessed the correct word. Way to go!\n\n\t\t       The word was: ";
                alert($scope.result + $scope.wordToGuess);
                $scope.resetGuess();
            }   
        else if ($scope.guestGuess != $scope.wordToGuess & ($scope.allowed - $scope.guessed) > 1)
            {
                $("input[type=text]").ready(function () { $("#guessEntry").removeClass("has-error").addClass("has-warning"); });
                $("#guessStatus").removeClass("glyphicon glyphicon-remove form-control-feedback").addClass("glyphicon glyphicon-thumbs-down form-control-feedback");
                $scope.pushGuess(guestGuess);
                $scope.result = "Please try again!";    
                alert($scope.result);
            }
        else if (($scope.allowed - $scope.guessed) <= 1)
            {
                $("input[type=text]").ready(function () { $("#guessEntry").removeClass("has-warning").addClass("has-error"); });
                $("#guessStatus").removeClass("glyphicon glyphicon-thumbs-down form-control-feedback");
                $("#guessStatus").addClass("glyphicon glyphicon-remove form-control-feedback");
                $scope.guesses.push($scope.guestGuess);
                $scope.guessed = $scope.guesses.length;
                $scope.result = "Game over! The word was: ";    
                alert($scope.result + $scope.wordToGuess);
            }
        $scope.guess = '';
        };
    });

Answer 1

似乎是ui-router在加载视图时处理范围创建的方式。我不使用它，所以我不知道它做了什么（我使用并推荐http://angular-route-segment.com/）

所以我把你的wordController放在game.html里面并且有用了

http://plnkr.co/edit/8ZSyuNAXiC9JX4vBcwtr

我还建议您使用directives和factories而不是controllers来重新编写您的应用，让factories控制对猜测的检查，所以你使用factory和使用GuessService.checkInput($scope.guestGuess)的api会使您的应用程序更加模块化，更易于调试和测试。

Answer 2

$scope.addGuess = function()
{
    $scope.guestGuess = $("#guessEntry").val();
    if ($scope.guestGuess === null || $scope.guestGuess === '')
        {

        ........ //rest of code

我认为缺少对用户输入的引用。

添加嵌套视图后代码停止工作

2 个答案: