My gaming console is malfunctioning and the controller is unresponsive

I developed an application with a login page and a controller structured like this: ---->

--->over here :)

(function(){
    'use strict';
    angular
        .module("loginApp",[])
        .controller("loginCtrl",loginCtrl);
    loginCtrl.$inject = ['$location','$scope','loginService'];
    function loginCtrl($location,$scope,loginService){
        var vm = $scope;
        vm.login = login;
        function login(){
            var user = vm.user;
            console.log(user);
        };
    }
})();
<body ng-app="loginApp" ng-controller="loginCtrl">

<div class="col-md-6 col-md-offset-3">
    <h2>Login</h2>
    <form name="form" ng-submit="login()" role="form" method="post">
        <div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
            <label for="username">Username</label>
            <input type="text" name="username" id="username" class="form-control" ng-model="user.username" required />
            <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" class="form-control" ng-model="user.password" required />
            <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
        </div>
        <div class="form-actions">
            <button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-primary">Login</button>
            <img ng-if="dataLoading"/>
            <a href="#/register" class="btn btn-link">Register</a>
        </div>
    </form>
</div>

  ...................

<!-- App -->
<script src="angular/scripts/login.router.js"></script>
<script src="angular/scripts/controllers/login/loginCtrl.js"></script>

However, after clicking the "login()" button, nothing happens. I am unsure of the reason why.

Answer №1

When setting up your controller, it's a good practice not to use the scope directly, but rather to assign an alias in your HTML (such as loginCtrl as login). This way, you can then set the models and call controller functions using the alias as a prefix (login.user.username).

<body ng-app="loginApp" ng-controller="loginCtrl as login">

<div class="col-md-6 col-md-offset-3">
    <h2>Login</h2>
    <form name="form" ng-submit="login.login()" role="form" method="post">
        <div class="form-group" ng-class="{ 'has-error': form.username.$dirty && form.username.$error.required }">
            <label for="username">Username</label>
            <input type="text" name="username" id="username" class="form-control" ng-model="login.user.username" required />
            <span ng-show="form.username.$dirty && form.username.$error.required" class="help-block">Username is required</span>
        </div>
        <div class="form-group" ng-class="{ 'has-error': form.password.$dirty && form.password.$error.required }">
            <label for="password">Password</label>
            <input type="password" name="password" id="password" class="form-control" ng-model="login.user.password" required />
            <span ng-show="form.password.$dirty && form.password.$error.required" class="help-block">Password is required</span>
        </div>
        <div class="form-actions">
            <button type="submit" ng-disabled="form.$invalid || dataLoading" class="btn btn-primary">Login</button>
            <img ng-if="dataLoading"/>
            <a href="#/register" class="btn btn-link">Register</a>
        </div>
    </form>
</div>

  ...................

<!-- App -->
<script src="angular/scripts/login.router.js"></script>
<script src="angular/scripts/controllers/login/loginCtrl.js"></script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

As a prop undergoes changes, the constant reverts back to its original values

I created a filter component for a table... The handleSearch function updates the const filters perfectly when the dataIndex props remain the same. However, when it changes, the filters value resets back to an empty array. Despite console logging everyth ...

The focus is being lost on the ng-model when used within an ng-repeat

Within my JavaScript code, I am initiating a new question object like this: $scope.newQuestion = { answers: [] }; This is how it reflects in the HTML: <div class="row" ng-repeat="answer in newQuestion.answers"> <div class="input-field col m ...

Dynamically created HTML elements have no events attached to them in Angular and jQuery

Utilizing jQuery, I am dynamically generating new elements within an Angular Form that has been constructed using a Template Driven Forms approach. Despite successfully creating the dynamic elements, they do not seem to be assigned events/callbacks due to ...

Iterating Through Array with Node JS Before Adding a New Property

There is a JSON input with data connected to a secondary model called Users. To process this, I need to iterate through listingData.Agents to extract the index ID and then use this ID to find the corresponding user. The challenge here is that due to asynch ...

The C# MVC Controller is having difficulty retrieving decimal or double values from an Ajax POST request

Having trouble sending decimal or double values via ajax to my C# MVC Controller. The values always come through as null, even though they work fine when sent as strings or integers. Why is this happening? When checking the client's request, the corre ...

What is the best way to consistently resize elements to the same pixel value, like "10px", using jquery-ui?

Is there a method to consistently resize a div element by a specific pixel value each time, such as "10px"? I am attempting to achieve this using jquery-ui, where I can resize the element but desire to resize it consistently by a set pixel value. $(child ...

What is the best way to alter the order of the .map function in JavaScript to display in ascending or descending order?

I currently have 25 songs in my Spotify playlist, with the possibility of more being added in the future. The songs are numbered from 1 to 25. However, the map() function I use only displays the top 10 songs (1 to 10). When a new song is added, it is assig ...

Attempting to transpile JavaScript or TypeScript files for compatibility within a Node environment

Our node environment requires that our JavaScript files undergo Babel processing. Figuring out how to handle this has been manageable. The challenge lies in the fact that we have a mix of file types including .js, .jsx, .ts, and .tsx, which is not subject ...

Looking to verify an "else" condition within an alert in ReactJS?

In my code below, there is a text field and a button. If the text field is not filled and the button is submitted, an alert message should appear asking to fill in the input text. Currently, when I submit the button without filling the input text, the ale ...

Can we separate city, state, and country data into individual input fields using Autocomplete and Geonames?

Currently, I have a single INPUT field set up to trigger the jQuery UI Autocomplete function, which pulls data from Geonames API. $( "#city_state_country" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "http ...

Trigger the ng-change event for a textbox using a method other than keypress or keydown

Looking to dynamically update a text value without triggering the update method while typing in the textbox. The update method should only be called when exiting the textbox or changing it through script code: <input type="text" ng-model ="model.value" ...

Encountering a syntax error when attempting to generate a div dynamically with jQuery

I am in the process of creating a view application form using Bootstrap after submitting a form. Initially, I created it utilizing two 'div' elements. Now, I am exploring how to dynamically generate a div upon clicking a button: <i> Sectio ...

Spinner Vue Displays while Loading Image from a URL

I am trying to display a loader spinner while an image is loading, but I am having trouble implementing this. Even after debugging and getting true and false values in the console, the spinner is still not showing up. <template> <div class=&q ...

Sorting a list with Angular Sortable and Rails: Step-by-step guide

I'm facing a challenge with my project. I've developed an API using Rails and a client using Angular. Within my model called Todo, there is a property named order. When a new Todo is created, I automatically assign it an order value using the fol ...

The Invalid_grant OAuth2 error occurs when attempting to access the Google Drive API using

SOLVED! The issue was resolved by correcting the time on my Linux Server. Google's server was blocking access due to incorrect time settings. I used the following command on my Server to synchronize the time: ntpdate 0.europe.pool.ntp.org Original P ...

Tips for patiently waiting for a function that is filled with promises

Consider the following function: const getData = () => { foo() .then(result => { return result; }) .catch(error => { return error; }); }; Even though getData does not directly return a promise, it internally handles asynchro ...

What is the rationale behind jQuery.each not using Array.forEach when it is accessible?

After delving deep into the codebase of the underscore library, I came across an interesting discovery. It seems that _.each relies on an ECMAScript 5 API called Array.forEach whenever it is available: var each = _.each = _.forEach = function(obj, iterato ...

Tips for customizing the time selector in material-ui-time-picker

Is there a way to enable keyboard input control for the material-ui-time-picker? Currently, it only allows editing when clicking on the clock interface. Here is a snippet of my code: import React, { Component } from "react"; import { TimePicker } from " ...

A guide on simulating HTTP methods in Jest when dealing with private methods

I'm grappling with how to simulate the following functionality. I need to simulate both methods: getAllBookInCategory, deleteBookInCategory The public method invokes private methods and I presume I don't need to test private methods, only callin ...

Display images next to each other with no need for a scroll bar

I'm currently developing a Roulette website and I am struggling to make the roulette animation function properly. I have an image for the roulette wheel, but I need the image to vanish after reaching a certain point and then loop around to the left. ...