javascript - 添加嵌套 View 后代码停止工作

Question

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

大家好，

我有一个简单的页面，用于根据设置的单词检查文本输入。在我的原始代码中，页面的工作原理如下( original code )

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

我在代码中添加了嵌套 View ，但现在我的代码损坏了，因为它总是告诉用户文本字段为空( nested view code )

我不确定这是否是我的 Controller 的问题，但我检查了我的代码，但找不到问题。

这是游戏的 Controller

  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 在加载 View 时处理范围创建的方式。我不使用它，所以我不知道它的作用(我使用并推荐 http://angular-route-segment.com/ )

所以我将你的 wordController 放入 game.html 中并且它起作用了

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

我还建议您使用比 Controller 更多的指令和工厂来重写您的应用程序，并拥有工厂 控制猜测的检查，因此您将拥有一个带有 factory 的 api，并使用 GuessService.checkInput($scope.guestGuess) 这将使您的应用程序更加模块化，更容易调试和测试。