Member Avatar for gcardonav
gcardonav 0 Junior Poster in Training

I want to create an option that will reset my page once the user clicks on an alert the controller will reset to original form. I have the alert all set up but I am not sure how to do this. In JavaScript I created a function that did this startANewGame(); which was this

function startANewGame() {
    $('#startNew').click(function() {
        location.reload(true);
        $("input[type=submit]").val("Guess");
        $("input[type=submit]").attr("id","guessButton");
    }); // End of $('#startNew')
}   //End of function startANewGame()

Is there a way to a function such as reload in AngularJS that will do this or do I need to create a function? Here is how my option looks so far in my controller.js file

            else (($scope.allowed - $scope.guessed) < 0)
                {
                    $scope.result = "Game over! The word was: ";    
                    alert($scope.result + $scope.wordToGuess);  
                }

Thank you guys.

  • 1 Contributor
  • 0 Replies
  • 201 Views

Dani AI

Generated

— avoid reloading the whole page. In AngularJS it’s cleaner and faster to restore your model and reset the form state instead of using a full-page reload or direct DOM/jQuery manipulation. Save an initial copy of the game state when the controller starts, restore that copy when the user dismisses the alert, and call the form API to clear validation state.

Example pattern (controller-side):

// inject $window if you use alert() here
$scope.game = { target: 'secret', guessesLeft: 6, submitLabel: 'Guess' };
var initialGame = angular.copy($scope.game);

$scope.resetGame = function() {
  $scope.game = angular.copy(initialGame);
  if ($scope.gameForm) {               // form named in the template: name="gameForm"
    $scope.gameForm.$setPristine();
    $scope.gameForm.$setUntouched();
  }
};

$scope.endGame = function() {
  $window.alert('Game over — word was: ' + $scope.game.target);
  $scope.resetGame();
};

Notes and troubleshooting

  • Bind UI text and attributes to the model (e.g., value="{{game.submitLabel}}" or ng-bind) instead of changing button text/IDs with jQuery. This keeps the view and model in sync automatically.
  • If you must trigger reset from a non-Angular callback (for example legacy jQuery), wrap it in $scope.$apply() or call the reset inside an Angular-handled event so the digest runs.
  • If you want a full controller reload instead of restoring state, use the router’s reload ($route.reload() for ngRoute), but that’s heavier and usually unnecessary.

This approach keeps logic testable, avoids flicker from page reloads, and uses Angular’s built-in form APIs to clear validation and touched/pristine flags.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.