CODEWITHSUNDEEP
javascriptangularjs
Tavo
Tavo

Reputation: 175

Code stop working after I added nested views

Code stop working after I added nested views - AngularJS

Hi guys,

I have a simple page that checks a text input against an set word. In my original code the page works the following (original code)

  1. If the user does not enter a text the code will prompt them not to leave the text field empty.
  2. The text will be compared, if wrong the number of guesses diminishes and then the user will have another chance to enter the right answer.
  3. If the user gets the right answer and alert will prompt them of the right answer.
  4. If the user runs out tries the page will pop an alert letting the user knows that they run out of guesses and will let them know what the correct word was.

I added nested views to my code and now my code broke, because it is always telling the user that the text field is empty (nested view code)

I am not certain if it is an issue with my controllers, but I gone up and down my code and I can't find the issue.

Here is the controller for the game

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

Upvotes: 0

Views: 43

Answers (2)

user1031721
user1031721

Reputation:

Seems like it's the way that ui-router handles the creation of scopes when it loads views. I don't use it so i don't know what it does (i use and recommend http://angular-route-segment.com/ )

So i put your wordController inside of game.html and it worked

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

I do also kindly recommend you to re-write your app using more directives and factories than controllers, having factories control the checking of the guesses, so you'd have an api with a factory and use GuessService.checkInput($scope.guestGuess) that would make your app more modular and easier to debug and test.

Upvotes: 1

Mouser
Mouser

Reputation: 13304

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

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

I think a reference to the user input was missing.

Upvotes: 0

Related Questions